image doesn't show up on the web (React)

I’m making a small react application to traverse all images present in my directory.
I want to change image when button is clicked.
The problem is image won’t load on the web.

When I’m using import method to import images then it is working fine, but I think this approach is not good when I have multiple images to work with.

I also used require() but even in this case image won’t load. I don’t know what’s the problem.

import React from 'react'
const MyCollection = [
    {
        id:0,
        path:"./images/0.jpg",
    },
    {
        id:1,
        path:"./images/1.jpg",
    },
    {
        id:2,
        path:"./images/2.jpg",
    },
    {
        id:3,
        path:"./images/3.jpg",
    },
];

export default function App() {
    const [index, setActiveStep] = React.useState(0);
    const goToNextPicture = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };
    return (
        <div>
            <img src={MyCollection[index].path} height={200} width={200} alt=""/>
            <br/>
            <input type="button" onClick={goToNextPicture} value="Next"/>
        </div>
    )
}

Code Output

Thank You!

>Solution :

Your logic is correct. You just don’t have images in your local environment.
You just need create the images folder and add the images locally.
I tested it with image links, it works fine.
Sandbox link

import React from "react";
const MyCollection = [
  {
    id: 0,
    path:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png"
  },
  {
    id: 1,
    path:
      "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Zm9jdXN8ZW58MHx8MHx8&w=1000&q=80"
  },
  {
    id: 2,
    path: "https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"
  },
  {
    id: 3,
    path:
      "https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
  }
];

export default function App() {
  const [index, setActiveStep] = React.useState(0);
  const goToNextPicture = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };
  return (
    <div>
      {MyCollection[index] && (
        <>
          <img
            src={MyCollection[index].path}
            height={200}
            width={200}
            alt="images"
          />
          <div>{MyCollection[index].id}</div>
        </>
      )}
      <br />
      <input type="button" onClick={goToNextPicture} value="Next" />
    </div>
  );
}