@jakamenchik

Как в react импортировать в атрибут src значение из db.json?

Есть файл json с данными о картинах
{
   "painting" : [ {
      "authorId": 1,
      "created": "1850",
      "id": 1,
      "imageUrl": "./img1.png",
      "locationId": 1,
      "name": "The ninth wave",
      "key" : "img1"
    },
    {
      "authorId": 2,
      "created": "1747",
      "id": 2,
      "imageUrl": "./img2.png",
      "locationId": 2,
      "name": "L`Enlévement d`Europe",
      "key" : "img1"
    },
    {
      "authorId": 3,
      "created": "1472",
      "id": 3,
      "imageUrl": "./img3.png",
      "locationId": 3,
      "name": "Annunciation"
    },
    {
      "authorId": 4,
      "created": "1892",
      "id": 4,
      "imageUrl": "./img4.png",
      "locationId": 4,
      "name": "Evening on Karl Johan Street"
    },
    {
      "authorId": 5,
      "created": "1662",
      "id": 5,
      "imageUrl": "./img5.png",
      "locationId": 5,
      "name": "Syndics of the Drapers' Guild"
    },
    {
      "authorId": 2,
      "created": "1746",
      "id": 6,
      "imageUrl": "/img6.png",
      "locationId": 6,
      "name": "The Toilet Of Venus"
    }

)

И файл paintings.js
import React, {Component} from 'react' import PaintingsData from './db.json'

var paintings = PaintingsData.painting;

class Paintings extends Component {
render(){
    return(
        <ul>
            {
              paintings.map((s) => {
                return (  
                    <div>
                        <div><img src={s.imageUrl} alt={s.name}/></div>
                    </div>
                )  
                  })  
                }
            </ul>
    )

    
}

}
export default Paintings

Изображения не выводятся.
62d6c72e1ffff573990875.jpeg

Сначала я решил, что я как обычно, неверно указал путь к изображениям, поэтому переместил их просто в папку src, поменяв пути, но это не помогло. Более чем уверен, что решение проблемы довольно таки простое, однако прийти к нему я не могу.
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы