Не загружать изображения в React с использованием объекта JSON в качестве ссылки

это моя проблема

У меня есть этот объект 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, чтобы использовать его в src тега img

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!


person Denis Ximenes    schedule 18.09.2020    source источник


Ответы (1)


Я думаю, вам следует сохранить папку с изображениями в общедоступной папке, а затем вы можете попробовать это напрямую, не импортируя.

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

]
person Narendra Chouhan    schedule 18.09.2020
comment
Спасибо!, Это сработало !!! Вы можете мне объяснить полезность папки public ?? Im new in React so i все еще учусь - person Denis Ximenes; 18.09.2020