How do I render images on the webpage in react from an array?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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.