Not loading images on React using a JSON object as reference

Question

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 !

Narendra Chouhan · Accepted Answer · 2020-09-18 18:31:23Z

1

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

]

answered Sep 18, 2020 at 18:31

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Denis Ximenes Over a year ago

Thank you !, that worked !!! Can you explain me the utility of the folder public ?? Im new in React so im still learning

Collectives™ on Stack Overflow

Not loading images on React using a JSON object as reference

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related