Блог

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

У меня есть этот объект 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!

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

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

]