如何更改图像源？

Question

我正在尝试更改图像并将其用作 firebase 中的用户个人资料照片

我可以将图像上传到存储，但无法使用下面的代码获取它们的网址

storage

 .ref("images")

 .child(image.name)

 .getDownloadURL()

 .then(url => {

  setUrl(url)

})

然后我想使用该 url 来更改图像 src

const upUserPhoto = () => {user.updateProfile({photoURL: url})} <img src={user.photoURL}/>

但它不起作用..我该如何解决这个问题，有更好的方法吗？请赐教。

完整代码

import React, { useState } from 'react'

import fire from "./fire"

function Profilephoto({ open, children, onClose }) {

    const[image, setImage] = useState(null)

    const[url, setUrl] = useState("")

    const[progress, setProgress] = useState(0)

    const storage = fire.storage();

    const user = fire.auth().currentUser

    if (!open) return null

    

    const asdChange = (e) => {

        if(e.target.files[0]) {

            setImage(e.target.files[0])

        }

    }

    const asdUpload = () => {

        const uploadTask = storage.ref(`ìmages/${image.name}`).put(image)

        uploadTask.on(

            "state_changed",

            snapshot => {

                const progress= Math.round(

                    (snapshot.bytesTransferred/snapshot.totalBytes) * 100

                )

                setProgress(progress)

            },

            error => {

                console.log("error")

            },

            () => {

                storage

                    .ref("images")

                    .child(image.name)

                    .getDownloadURL()

                    .then(url => {

                        setUrl(url)

                    })

            }

        ) 

    }

    const setProfile = () => {

        user.updateProfile({photoURL: url})

    }

    

    

    return (

        <>

        <div className="modalb"></div>

        <div className="modala">

            

            <progress value={progress} max="100"/>

            

            <input type="file" onChange={asdChange}/>

            <button onClick={asdUpload}>Upload</button>

        </div>

        </>

    )

}

export default Profilephoto

Answer 1

做类似的事情，听你的 setUrl 就像useEffectuseEffect({ &nbsp;&nbsp;&nbsp;&nbsp;setProfile() },&nbsp;[url]);