不使用JSON对象作为参考在React上加载图像

编程问答 2022-06-13

问题描述

这是我的问题

我在下面有这个对象Json：

const imagesData = [
    {
        "imagepath": "./images/a.jpg","title": "Red Car","uploadeDate": "2 May 2020","index": "0"
    },{
        "imagepath": "./images/b.jpg","title": "Blue Car","index": "1"
    },{
        "imagepath": "./images/c.jpg","title": "Green Car","index": "2"
    }

]

所以我的代码正在使用名为“ imagepath”的对象的属性在标记img的src上使用它

const card = imagesData.map(function (obj,ind) {
       
        return (
            <div className='card'>
                <img src={obj.imagepath} />
                <span>{obj.title}</span>
            </div>
        )

所以问题是图像没有加载，我已经检查了路径并且是正确的

这是它在屏幕上的显示方式的图片：

enter image description here

一个观察结果是，如果我尝试通过以下方式导入图像 import car1 from './images/a.jpg

然后，我将变量car1如下所示 <img src={car1} />

它工作正常！但是我需要一个解决方案，从json对象引用图像的路径！

解决方法

我认为您应该将图像文件夹保存在公共文件夹中，然后可以直接尝试而不导入。

const imagesData = [
    {
        "imagepath": '/images/a.jpg',"title": "Red Car","uploadeDate": "2 May 2020","index": "0"
    },{
        "imagepath": '/images/b.jpg',"title": "Blue Car","index": "1"
    },{
        "imagepath": '/images/c.jpg',"title": "Green Car","index": "2"
    }

]
imageimageimagejavascriptjsonreactjsreactjsreactjsreactjssrcsrc