How can I upload Storage images from Firebase database onto my menu page?

Question

I want to state that I am fairly new to reactjs and firebase. I am trying to upload images I have in my firebase storage and have it appear on my menu page for my website. So far I can read and upload data from my database, but I don't quite understand how to upload images. Any help?

import './Home.css';

import React from "react";
import Categories from "./Categories";
import items from "./data";
import { menu_Chow_Mein } from './firebase/firebaseConfig';
import { useState, useEffect, ReactDOM} from 'react';
import {collection, doc, setDoc, addDoc, getDocs} from 'firebase/firestore';



function Menu() {

  const [food, setFood] = useState([]);

  useEffect(() => {
    const getFood = async () => {
        const data = await getDocs(menu_Chow_Mein);
        setFood(data.docs.map((doc) => ({ ...doc.data(), id: doc.id})));

    };
    getFood();
  }, []);
  
  return(
      <div className='menu'>
        <div className="top-section"></div>
        {food.map((item) => {
          return (
            <article key={item.id} className="menu-items">
              <img src={item.ImageURL} alt={item.Name} className="photo" />
              <div className="item-info">
                <header>
                  <h4>{item.Name}</h4>
                  <h4 className="price">${item.Price}</h4>
                </header>
              
                <p className="item-text">{item.Description}</p>
              </div>
            </article>
          );
        })}
        </div>
    );
  }
  
  export default Menu;

Also, I attached some photos from my firebase database and storage.

Answer 1

Generally you would store the image URL from Firebase storage in the Firestore document along with name and price fields. Then while mapping all the items to your UI, you can set the src of image:

<p className="item-text">{item.Description}</p>
<img src={item.imageURL} />