Отображение изображения в react, которое хранится в моем бэкенде django

В настоящее время я столкнулся с довольно странной проблемой и хотел бы узнать, знает ли кто-нибудь решение. Я делаю api вызов к бэкенду Django, чтобы получить подробную информацию о профилях

export const ProfilesPage = () => {

    
    const classes = useStyles()
    useEffect(() => {
        getProfiles()
    })
    
    const [profiles, setProfiles] = useState([])

    let imgLink = ''

    let getProfiles = async () => {
        let response = await fetch('http://127.0.0.1:8000/api/profiles', {
            method: "GET"
        })
        let data = await response.json()
        // console.log(data[0].profile_image)
        imgLink = 'http://127.0.0.1:8000' + data[0].profile_image
        console.log(imgLink)
    }
        

    return (
        <div className={classes.root}>
            ProfilesPage
            <img alt='profile' src={imgLink} />
        </div>
    )
}

В последней строке моей функции getProfiles я вывожу в консоль ссылку на изображение. Ссылка появляется в моей консоли, и когда я нажимаю на нее, в браузере открывается правильное изображение. Я не знаю, почему react не отображает изображение, когда ссылка явно работает. Спасибо,

Попробуйте использовать состояние вместо let img = ''

Пример:

const [img, setImg] = useState([]);

useEffect(() => {
  const getProfiles = async () => {
        let response = await fetch('http://127.0.0.1:8000/api/profiles', {
            method: "GET"
        })
        let data = await response.json()
        // console.log(data[0].profile_image)
        imgLink = 'http://127.0.0.1:8000' + data[0].profile_image
        setImg(imgLink)
    }
   getProfiles();
}, [profiles])

Затем используйте состояние в возврате:

return (
        <div className={classes.root}>
            ProfilesPage
            <img alt='profile' src={img} />
        </div>
    )

Поскольку вы пытаетесь сохранить URL изображения в imgLink, он сбрасывается в пустую строку каждый раз, когда компонент перерисовывается.

Можно попробовать хранить URL изображения в состоянии, которое будет сохраняться между каждым рендерингом.

Вернуться на верх