Mi objetivo es representar varias imágenes cuya ruta ya he definido en una matriz llamada imágenes. Pero cuando quiero usarlo en el atributo src de una etiqueta img , por alguna razón no muestra la imagen, aunque la ruta sea correcta.
El código que escribí en el componente de reacción fue el siguiente:
let images=["../../../assets/temp.jpg", "../../../assets/temp2.jpg", "../../../assets/temp3.jpg"]; let n = images.length; let imgArray = []; for (let i = 0; i < n; i++) { imgArray.push(<img src={images[i]} alt="image cover" />); } return( <div> {imgArray} </div> );El código anterior no representa la imagen proporcionada como una ruta en src. Pero si importo la ruta y luego proporciono ese elemento importado como src, entonces funciona bien.
La tecnología que he usado en mi proyecto es React.js y Bootstrap
React usa JSX que no puede mostrar matrices. En su código, {imgArray} hay una matriz de imágenes, que ahora necesita recorrer y convertir en un componente/elemento JSX.
El mejor enfoque es utilizar la función array.map integrada en las matrices JS.
// use "const" not let if the var doesn't change const imgArray = [ { key: 'uniqueid1', src: 'path/to/img.png', }, ]; return <div> { imgArray.map(_img => <img src={_img.src} key={_img.key} alt="image cover" />) } </div> );Notarás que ahora tampoco necesitamos el bucle for.
PD: no olvide la "clave", es muy importante para React reconciliar los elementos de la imagen que ha creado (y tampoco use el índice de matriz)
Más información: