如何更改图像 src？

Question

I'm trying to change the image and using it as user profile photo in firebase

I can upload the images to storage but I can't take their url's using the code below

storage
 .ref("images")
 .child(image.name)
 .getDownloadURL()
 .then(url => {
  setUrl(url)
})

Then I want to use that url to change the image src

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

but it didn't work..How can I fix this and is there better way to make this? Please enlighten me.

Whole code

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>

            <form onSubmit={setProfile}>
                <input type="submit" value="Add"/>
            </form>
            
            <img src={url} width="250rem" height="250rem" alt="error"/>

            
            <button  onClick={onClose}>Close</button>
            {children}
        </div>
        </>
    )
}

export default Profilephoto

Answer 1

Make something like that, that listen your setUrl like useEffect

useEffect({
    setProfile()
}, [url]);