0
521
VistasReaccionar, no puede importar imágenes locales dentro de una matriz para recorrer
Estoy aprendiendo React.js y pretendo hacer una página de producto, y tengo algunos problemas con la importación de imágenes desde mi directorio local. Estos son de mi proyecto real, pero es un editor en línea, pero debería estar bien porque es el mismo problema. Estos son mis archivos:
Mi aplicación.js:
import "./styles.css"; import Images from "./Images"; export default function App() { return ( <div className="container"> {Images.map((content) => ( <div className="product-image"> <img src={content.image} /> </div> ))} </div> ); }Mis imágenes.js:
const Images = [ { id: 1, image: "./img/img1.jpg" }, { id: 2, image: "./img/img2.jpg" }, { id: 3, image: "./img/img3.jpg" } ]; export default Images; Para Image.js , es extraño porque si convierto la fuente de la imagen en un formato de URL, funciona bien. El nombre del directorio local no debería ser un problema porque ahí es donde importé otras fuentes en mi proyecto. Cualquier ayuda sería apreciada.
1 Respuestas
Responde la pregunta0
Para que esto funcione, tiene dos opciones, o coloca su carpeta img dentro de la carpeta public y cambia Images.js a esto:
const Images = [ { id: 1, image: "/img/img1.jpg" }, { id: 2, image: "/img/img2.jpg" }, { id: 3, image: "/img/img3.jpg" } ]; export default Images; O mantienes la carpeta img dentro de src y cambias Images.js a esto:
import img1 from "./img/img1.jpg"; import img2 from "./img/img2.jpg"; import img3 from "./img/img3.jpg"; const Images = [ { id: 1, image: img1 }, { id: 2, image: img2 }, { id: 3, image: img3 } ]; export default Images;Consulte este control de calidad de desbordamiento de pila para saber por qué es así.