Блог

Главная - Вопросы по программированию - Как отобразить изображение, считанное из файла json, в react js?

Как отобразить изображение, считанное из файла json, в react js?

#reactjs

Вопрос:

Как отобразить изображение, считанное из файла json?

Это мой файл json (brand1.js):

 let brand1 = [
{
    "id": 1,
    "title": "Herringbone",
    "path": './assets/imgs/brand1/34-SAU028A.jpg'
}
]
export default brand1

Я импортирую файл json в свой файл App.json

 import brand1 from './assets/json/brand1';

function App() {

<div>
        {
            brand1.map((item, i) => 
            <div key={i}>
              <img src={item.path} />
            </div>
           )
        }
</div>

Но изображение не отображается. Что я делаю не так?

Комментарии:

1. когда вы смотрите на отображаемый html, src соответствует ли он тому, что вы ожидаете? Есть ли изображение в этом месте?

2. когда я осматриваю его, он показывает <img src=»./assets/imgs/brand1/34-SAU028A.jpg»>

3. потому что ваш путь начинается с точки

4. ваше изображение находится в клиентском приложении или на сервере ? и я советую вам указывать имя изображения только в файле json или БД, а затем объединять его с URL-адресом в src

5. работает ли это, если вы удалите точку в начале, изменив './assets/imgs/brand1/34-SAU028A.jpg' ее на '/assets/imgs/brand1/34-SAU028A.jpg' ?

Метки: , ,