0
97
ViewsMi imagen no se procesa cuando paso la ruta de origen de la imagen como accesorios. La imagen se procesa cuando doy la ruta de origen de la imagen
Este es el componente principal. data.js y en ese data.js he exportado el objeto de productos donde he escrito la ruta de origen de id e img. He publicado la imagen y también puedes ver la estructura del archivo allí. Probé la ruta de origen de la imagen de data.js y product.js, pero ninguna de ellas funciona
const ProductList = () => { return ( <div className='productlist'> <div className="pl-texts"> <h2 className="productlist_title"> Create & inspire. It's David </h2> <p className="productlist_desc"> David is a creative portfolio that your work has been waiting for. Beautiful homes, stunning portfolio styles & a whole lot more awaits inside. </p> </div> <div className="product-list"> {products.map((item) => ( <Product key={item.id} img={item.img}/> ))} </div> </div> ) } //This is the child component import './product.css' const Product = ({img}) => { console.log(img) return ( <div className='product'> <div className="p-browser"> <div className="p-circle"></div> <div className="p-circle"></div> <div className="p-circle"></div> </div> <img className='p-img' src={img} alt="" /> //If I give direct img path then it works. I have sent img path in the props. </div> ) } export default Product
·
Juan Pablo Isaza
1 answers
Answer question0
Hay dos formas de poner imágenes en su aplicación. Tienes que elegir uno.
- Podemos poner imágenes en una carpeta pública y pasar la ruta de la imagen a
<img />(Más información: https://create-react-app.dev/docs/using-the-public-folder )
Digamos que tenemos /img en la carpeta pública.
/public /img /ecommerce.PNG Luego, podemos mostrar la imagen dando la ruta http a la imagen ( yourdomain.com/img/ecommerce.PNG )
<img src="/img/ecommerce.PNG" /> // Notice there's no ../../ in the path.- Podemos importar un archivo directamente en un módulo JavaScript (Más información:https://create-react-app.dev/docs/adding-images-fonts-and-files )
/src /img /ecommerce.PNGEntonces podemos mostrar la imagen por
import ecommerceImage from '../img/ecommerce.PNG'; <img src={ecommerceImage} />En su escenario, la solución más rápida sería editar los datos de los productos en
const products = [ { id: 1, img: require('../../img/ecommerce.PNG') }, { id: 2, img: require('../../img/adminportal.PNG') }, { id: 3, img: require('../../img/imagegallery.PNG') }, { id: 4, img: require('../../img/netflix.PNG') }, ];
·
Juan Pablo Isaza
Report
Answer question