javascript - example - reactjs render props

Mostrar imágenes en React usando JSX sin importar

Question

El problema al que me enfrento es con img tag. Cuando se trata de una sola, el siguiente código carga la imagen:

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

Pero el siguiente código no se carga:

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

Necesito pasar por json, algo como [{''img'': ''./ images / image1.jpg'', ''name'': ''AAA''}, {''img'': ''./ images / image2.jpg'', '' nombre '':'' BBB ''}] y muestra cada uno de ellos como imagen con nombre como pie de página. El bucle está bien pero las imágenes no se cargan. En realidad, no es posible para mí importar todas las imágenes que se agreguen. No utilizo nada más que JSX a partir de ahora. Favor de favor.

Answer 1

Acabo de intentar esto, funciona!

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

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

Answer 2

Necesitas requerir el archivo así:

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

Answer 3

require se usa para "importaciones" estáticas, por lo que solo necesita cambiar sus imports .

Ejemplo:

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