不使用 JSON 对象作为参考在 React 上加载图像 [英] Not loading images on React using a JSON object as reference

问题描述

这是我的问题

我在下面有这个对象 Json:

const imagesData = [{图像路径":./images/a.jpg"，标题":红车"，上传日期":2020 年 5 月 2 日"，索引":0"}, {图像路径":./images/b.jpg"，标题":蓝色汽车"，上传日期":2020 年 5 月 2 日"，索引":1"}, {图像路径":./images/c.jpg"，标题":绿色汽车"，上传日期":2020 年 5 月 2 日"，索引":2"}]

所以我的代码使用了这个名为imagepath"的对象的属性.在标签 img 的 src 上使用它

const card = imagesData.map(function (obj, ind) {返回 (
<img src={obj.imagepath}/><span>{obj.title}</span>
)

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

这是它如何在我的屏幕上显示的图片:

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

在此之后，我将变量 car1 如下所示

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

解决方案

我觉得你应该把你的图片文件夹放在 public Folder 中，然后你可以不用导入直接尝试这个.

const imagesData = [{图像路径":/images/a.jpg"，标题":红车"，上传日期":2020 年 5 月 2 日"，索引":0"}, {图像路径":/images/b.jpg"，标题":蓝色汽车"，上传日期":2020 年 5 月 2 日"，索引":1"}, {图像路径":/images/c.jpg"，标题":绿色汽车"，上传日期":2020 年 5 月 2 日"，索引":2"}]

this is my problem

I have this object Json below:

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"
    }

]

So my code is using the property of this object called "imagepath" to use it on the src of the tag img

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

so the problem is that the images are not loading, i have already checked the path and it is right

this is a picture of how it shows on my screen:

One observation is that if i try to import the images by import car1 from './images/a.jpg

and after this i put the variable car1 like below <img src={car1} />

it works fine !. But i need a solution that i reference that path of the image from a json object !

解决方案

I think you should keep your images folder in the public Folder and then you can try this directly without importing.

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 上加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！