Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

186
Visualizações
How can I upload Storage images from Firebase database onto my menu page?

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.

URL Firebase Database Error

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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} />
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda