如何在反应中动态加载图像答案

【问题标题】：How to dynamically load an image in react如何在反应中动态加载图像
【发布时间】：2022-01-06 08:14:42
【问题描述】：

如何正确加载此图像？

import image_1 from "../../static_media/1.png"

handleClick = async (e) => {
    
    this.loadImage({
        "0": {
            name: "1.png",
            image: image_1,
            backend_address: await fetch(image_1).then(res => res.blob())
        }})
    }

当我做console.log(this.state.files[0])

我明白了

backend_address: Blob {size: 736023, type: 'image/png'} image: "/static/media/1.46b58831.png" 名称: "1.png" [[原型]]: 对象

当我执行以下操作时

<Image src={this.state.files[0].image} />

我明白了

TypeError: Cannot read properties of undefined (reading 'image')

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

试试这个：

  <Image src={this.state.files[0]?.image} />

【讨论】：