Wyświetlanie obrazów w React przy użyciu JSX bez importowania

Question

Problem w obliczu jest związany z tagiem img. Kiedy jeden jest zaniepokojony, Poniższy kod ładuje obraz:

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

Ale poniżej kod nie obciążenie:

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

muszę pętli json, coś jak [img { ' ":" ./ images/image1.jpg ',' name ':' AAA '}, {' img ':' ./ images/image2.jpg ',' name ':' BBB '}] i wyświetlaj każdy z nich jako obraz z nazwą jako stopką. Pętla jest w porządku, ale obrazy nie ładują się. Nie jest możliwe zaimportowanie wszystkich zdjęć do dodania. Nie używam niczego innego niż JSX od teraz. Proszę o przysługę.

Answer 1

Trzeba wymagać plik tak:

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

Answer 2

require służy do statycznych „importu”, więc po prostu trzeba zmienić imports.

Przykład:

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