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

Question

这是我的问题

我下面有这个对象Json：

const imagesData = [
    {
        "imagepath": "./images/a.jpg",
        "title": "Red Car",
        "uploadeDate": "2 May 2020",
        "index": "0"
    }, {
        "imagepath": "./images/b.jpg",
        "title": "Blue Car",
        "uploadeDate": "2 May 2020",
        "index": "1"
    }, {
        "imagepath": "./images/c.jpg",
        "title": "Green Car",
        "uploadeDate": "2 May 2020",
        "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>
        )

所以问题是图片没有加载，我已经检查过路径是正确的

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

一个观察结果是，如果我尝试通过 import car1 from './images/a.jpg

然后我把变量 car1 放在下面 <img src={car1} />

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

Answer 1

我认为你应该将你的图像文件夹保存在 public 文件夹中 然后你可以直接尝试这个而不需要导入。

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

]

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

Not loading images on React using a JSON object as reference

javascript

json

image

src

reactjs