Hola comunidad, estoy atascado en algún momento. Soy nuevo en React JS. Quiero llamar al archivo de imagen usando la función de mapa. Solo las imágenes que no aparecen en la página web.
Aquí está mi archivo Array.jsx
const PhotoData = [ { imgsrc: gallery_1 }, { imgsrc: gallery_4 }, { imgsrc: gallery_7 }, { imgsrc: gallery_10 } ] const PhotoData1 = [ { imgsrc: gallery_2 }, { imgsrc: gallery_6 }, { imgsrc: gallery_8 }, { imgsrc: gallery_12 } ] const PhotoData2 = [ { imgsrc: gallery_3 }, { imgsrc: gallery_5 }, { imgsrc: gallery_9 }, { imgsrc: gallery_11 } ] export default [PhotoData,PhotoData1,PhotoData2];también importe las imágenes de la galería arriba del código.
Aquí está mi archivo photos.jsx donde escribo el código.
<div className='photo__header-grid'> <div className='grid-item'> { PhotoData.map((val,index)=>{ return( <div className='gallery-item' key={index}> <img src={val.imgsrc} alt="gallery_1"/> </div> ) }) } </div> </div> <div className='photo__header-grid-1'> <div className='grid-item'> { PhotoData1.map((val,index)=>{ return( <div className='gallery-item' key={index}> <img src={val.imgsrc} alt="gallery_1"/> </div> ) }) } </div> </div> <div className='photo__header-grid-2'> <div className='grid-item'> { PhotoData2.map((val,index)=>{ return( <div className='gallery-item' key={index}> <img src={val.imgsrc} alt="gallery_1"/> </div> ) }) } </div> </div>Las imágenes no aparecen en la página web. Gracias por adelantado.
Agregue esto al archivo Array.jsx
const PhotoData = [ { imgsrc: gallery_1 }, { imgsrc: gallery_4 }, { imgsrc: gallery_7 }, { imgsrc: gallery_10 } ]; const PhotoData1 = [ { imgsrc: gallery_2 }, { imgsrc: gallery_6 }, { imgsrc: gallery_8 }, { imgsrc: gallery_12 } ]; const PhotoData2 = [ { imgsrc: gallery_3 }, { imgsrc: gallery_5 }, { imgsrc: gallery_9 }, { imgsrc: gallery_11 } ]; export default { PhotoData, PhotoData1, PhotoData2 }; Luego impórtelo al archivo photos.jsx
import { FC } from 'react'; import { PhotoData, PhotoData1, PhotoData2 } from './Array.jsx'; // location of the array.jsx file const Photos: FC = () => { return ( <> <div className="photo__header-grid"> <div className="grid-item"> {PhotoData.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-1"> <div className="grid-item"> {PhotoData1.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-2"> <div className="grid-item"> {PhotoData2.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> </> ); }; export default Photos;