Afficher les images dans React en utilisant JSX sans importer

Question

Le problème que je rencontre est avec img tag. Quand un seul est concerné, le code ci-dessous charge l'image:

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

Mais le code ci-dessous ne se charge pas:

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

J'ai besoin de parcourir json, quelque chose comme [{'img': './ images/image1.jpg', 'nom': 'AAA'}, {'img': './ images/image2.jpg', ' name ':' BBB '}] et affichez-les sous forme d'image avec le nom pied de page. Boucler, c'est bien, mais les images ne se chargent pas. Il ne m'est pas possible d'importer toutes les images à ajouter. Je n'utilise rien d'autre que JSX pour l'instant. Merci de bien vouloir.

Answer 1

Vous devez exiger le fichier comme suit:

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

Answer 2

require est utilisé pour les "importations" statiques, il vous suffit donc de changer votre imports.

Exemple:

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

Answer 3

Je viens d'essayer ça, ça marche!

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}