Estoy tratando de crear una tarjeta con un título, una descripción y una imagen.
Mi estructura de archivos se parece a:
src -components -images -section -Featured.jsEn un archivo config.js tengo:
module.exports = { featuredSection: [ { name: 'beer-image-1', title: 'Mango Cart', description: 'A light Wheat Ale bursting with lots of fresh mango flavor and aroma, finishing crisp and refreshing.', }, ], }; En mi archivo de componente Featured.js he intentado:
const Featured = () => { ... // Get array of all names in config file const featuredNames = featuredSection.map((beer) => beer.name); // --> ['beer-image-1'] // Return an image for each name in `featuredNames` array const images = featuredNames.map((image) => { return ( <img key={image} src={require(`../images/${image}.jpg`)} alt='Beer picture' /> ); }); // Return title, desc., and image const card = featuredSection.map((image, i) => { return ( <div key={i}> <h1>{image.title}</h1> <p>{image.description}</p> {images} </div> ); }); return <>{card && card}</>; }Esto devuelve el título y la descripción, pero la imagen no se carga y solo muestra el texto alternativo.
He estado tratando de hacer uso de estos ejemplos, pero siempre aparece el texto alternativo.
¿Puedes mover tu carpeta de images a la carpeta public ? Si puede, el siguiente código debería funcionar
<img key={image} src={`./images/${image}.jpg`} alt='Beer picture' /> Si no puede mover la carpeta de images intente a continuación. Utilice la propiedad predeterminada de require . Debería tener la imagen src.
const images = featuredNames.map((image) => { const img = require(`../images/${image}.jpg`).default; return ( <img key={image} src={img} alt='Beer picture' /> ); });Creo que en el img JSX, el atributo src no necesita agregar require(). Simplemente verificaría la estructura de su directorio en función de su ruta relativa.
return ( <img key={image} src={`../images/${image}.jpg`} alt='Beer picture' /> );Además, creo que se puede mapear la sección destacada directamente para obtener la ruta de la imagen. Admito que sería conveniente si el nombre de su elemento es el mismo que el nombre de su imagen. le gustaría:
const card = featuredSection.map((item, i) => { return ( <div key={i}> <h1>{item.title}</h1> <p>{item.description}</p> <img src={`../images/${item.name}.jpg`} alt='Beer picture' /> </div> ); });