El problema que enfrenté es con la etiqueta img . Cuando se trata de una sola imagen, 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 recorrer json, algo como:
[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]Además, muestre cada uno de ellos como imagen con el nombre como pie de página. El bucle está bien, pero las imágenes no se cargan. En realidad, no me es posible importar todas las imágenes para agregar. No uso nada más que JSX a partir de ahora. Por favor favor.
Necesitas solicitar el archivo así:
<img src={ require('./images/image1.jpg') } />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} />Podríamos usar require en lugar de declaración de importación. Me gusta ,
<img src={require("folder/image.format")} alt="image not found" />¡Pero si lo ejecuta, mostrará la imagen no encontrada!
Simplemente podríamos resolverlo cambiando la declaración agregando .default
let image = require("folder/image.format"); <img src={image.default} alt="image not found" />