javascript - 如何将存储图像从 Firebase 数据库上传到我的菜单页面？

Question

我想声明我是 reactjs 和 firebase 的新手。我正在尝试上传我在我的 firebase 存储中的图像，并将其显示在我网站的菜单页面上。到目前为止，我可以从我的数据库中读取和上传数据，但我不太明白如何上传图像。有帮助吗？

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;

另外，我附上了一些来 self 的 firebase 数据库和存储的照片。

Answer 1

通常，您会将来自 Firebase 存储的图像 URL 与名称和价格字段一起存储在 Firestore 文档中。然后在将所有项目映射到您的 UI 时，您可以设置图像的 src:

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