The images are not showing on the webpage, and I have been unable to figure out the problem. here's my code. I had even tried using images locally on my computer, still the same.
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 AllMeetUpsPage
#MeetupList component
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 MeetUpList
export 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>
);
};
This is one way. You probably can't do {...properties} when you include description 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>
</>
})
}
</>
)
}
In order to load local images to your React.js application, you need to add require parameter in media sections.