Quiero decir que soy bastante nuevo en reactjs y firebase. Estoy tratando de cargar imágenes que tengo en mi almacenamiento de Firebase y que aparezcan en la página de menú de mi sitio web. Hasta ahora puedo leer y cargar datos de mi base de datos, pero no entiendo muy bien cómo cargar imágenes. ¿Alguna ayuda?

 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;

Además, adjunté algunas fotos de mi base de datos y almacenamiento de firebase.