Las imágenes no se muestran en la página web y no he podido resolver el problema. aquí está mi código. Incluso había intentado usar imágenes localmente en mi computadora, sigue igual.
import MeetupList from "../components/layout/meetups/meetupList"; const DATA = [ { id: 'm1', title: 'This is a first meetup', image: 'https://unsplash.com/photos/nSY9XBCk58Y', address: 'Meetupstreet 5, 12345 Meetup City', description: 'This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!', }, { id: 'm2', title: 'This is a second meetup', image: 'https://unsplash.com/photos/nSY9XBCk58Y', address: 'Meetupstreet 5, 12345 Meetup City', description: 'This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!', }, ]; function AllMeetUpsPage(){ return <section> <h1>All Meetups</h1> <MeetupList meetups={DUMMY_DATA}/> </section> } export default AllMeetUpsPageComponente #MeetupList
import classes from './meetupList.module.css' function MeetUpList(props){ return <ul className={classes.list}> {props.meetups.map(meetup => <meetupItem key={meetup.id} id={meetup.id} image={meetup.image} title={meetup.title} address={meetup.address} description={meetup.description} />)} </ul> } export default MeetUpListexport const TEST = () => { const ImageData = [ { src: "img-path", alt: "this is x", }, { src: "img-path", alt: "this is x", }, { src: "img-path", alt: "this is x", }, { src: "img-path", alt: "this is x", }, ]; return ( <div> {ImageData.map((properties) => ( <img {...properties} /> ))} </div> ); };Esta es una forma. Probablemente no pueda hacer {... propiedades} cuando incluye una descripción, etc.
const MeetupList=({meetups})=>{ return( <> { meetups.map((item,index)=>{ const[id,title,image,address,description]=item; <> <p>{id}</p> <p>{title}</p> //local image <img src={require("path")}/> //http images <img src={image}/> <p>{address}</p> <p>{description}</p> </> }) } </> ) }Para cargar imágenes locales en su aplicación React.js, debe agregar el parámetro require en las secciones de medios.