如何从 React.js 中的 firebase 获取文件

Question

I have uploading function to firebase with React.js, I use put method for upload images to firebase, now I need to download that picture from firebase, could you help me please? my cod for uploading file is:

import React, { useState, useEffect } from 'react'
import { storage } from '../../firebase/firebase'

const Upload = () => {

    const [photo, setPhoto] = useState(null)
    const [url, setUrl] = useState(null)


    const imageChangeHandler = (event) => {
        setPhoto(event.target.files[0])
    }

    const fileUploadHandler = () => {

        const uploadTask = storage.ref(`image/${photo.name}`).put(photo);
        uploadTask.on(
            'state-changed',
            snapshot => { },
            error => {
                console.log(error);
            },
            () => {
                storage.ref('image').child(photo.name).getDownloadURL()
                    .then(url => {
                        setUrl(url)
                    })
            }
        )
    }

    return (
        <div className="upload-box">
            <div className="form-upload">
                <input onChange={imageChangeHandler} type="file" className="upload-input" />
                <button onClick={fileUploadHandler} type="submit" value="Send" className="upload-btn">Upload</button>
                <ul>
                    <li>
                        <img width="200px" height="200px" src={url} alt="firebase_uladed_image" />
                    </li>
                </ul>
            </div>
        </div>
    )
    }

     export default Upload

Answer 1

you need to use useEffect to get image from firebase something like this

useEffect(()=>{
   fetchApi
   setImage() 
}, [])