0
137
Vistas¿Cómo cargo una imagen de la carpeta de mi proyecto dentro de un archivo JavaScript?
Estoy tratando de crear un sitio web y actualmente estoy usando un archivo data.js como fuente de imágenes y enlaces en uno de mis componentes. La estructura de archivos se ve así en este momento.
Y mi archivo data.js se parece a esto:
export const products = [ { id: 1, img: "", link: "http://lama.dev", }, { id: 2, img: "", link: "http://lama.dev", }, ]; Deseo usar las imágenes de mi carpeta 'img' para que estén dentro de la parte img: "xxx" , pero no estoy seguro de cómo hacerlo. ¿Es esto posible?
No estoy seguro de si esto es necesario, pero así es como pretendo usar mi archivo data.js:
import "./product.css"; const Product = ({ img, link }) => { return ( <div className="p"> <div className="p-browser"> <div className="p-circle"></div> <div className="p-circle"></div> <div className="p-circle"></div> </div> <a href={link} target="_blank" rel="noreferrer"> <img src={img} alt="" className="p-img" /> </a> </div> ); }; export default Product;3 Respuestas
Responde la pregunta0
puede importar su imagen desde su carpeta img de esta manera.
import FirstImg from "./img/pexels-cátia-matos-1072179.jpg";y puedes usar así en el mismo archivo
export const products = [ { id: 1, img: FirstImg, link: "http://lama.dev" } ];o
Puede cambiar la ubicación de su carpeta img a pública
Imagen del estructurador de carpetas
público/img
y puedes usar así
export const products = [ { id: 1, img: "./img/470a19a36904fe200610cc1f41eb00d9.jpg", link: "http://lama.dev" } ];0
Prueba esto en tu data.js
import figma from './me.jpg' export const products = [ { id: 1, img: figma, link: "http://lama.dev", }, { id: 2, img: "", link: "http://lama.dev", }, ];0
Puede mover su carpeta de imágenes al directorio público. De lo contrario, todas esas imágenes se agruparían cuando creas tu aplicación de reacción.
A continuación, puede hacer que su data.js
const products = [ { id: 1, img: '/img/image.jpg', link: 'http://file/' } ] export default products