Отображать изображения в React с использованием JSX без импорта

Проблема, с которой я сталкиваюсь, - с тегом img. Когда речь идет о единственном, Следующий код загружает изображение:

import image1 from './images/image1.jpg;
<img src={image1} />

Но приведенный ниже код не загружается:

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

Мне нужно пройти через json, что-то вроде [{'img': './images/image1.jpg', 'name': 'AAA'}, {'img': './images/image2.jpg ',' name ':' BBB '}] и отображать каждый из них как изображение с именем в виде нижнего колонтитула. Looping - это хорошо, но изображения не загружаются. На самом деле я не могу импортировать все добавляемые изображения. На данный момент я не использую ничего, кроме JSX. Благодарим.

Ответ 1

Вам нужно будет потребовать файл следующим образом:

<img src={ require('./images/image1.jpg') } />

Ответ 2

require используется для статических "импорта", поэтому вам просто нужно изменить свой imports.

Пример:

var imageName = require('./images/image1.jpg')
<img src={imageName} />