Unable to Display Mapped PNG and JPG Images in Next.js

Question

I'm encountering an issue while attempting to map over local PNG and JPG images in my Next.js project. When I inspect the DOM, I notice that no images are rendered. However, when I individually use one image, it works perfectly fine.

Code example..

{imageArray.map((image, index) => (

  <img key={index} src={image} alt={`Image ${index}`} />

))}

The imageArray contains the paths to the local PNG and JPG images, and I'm dynamically generating img elements for each image.

However, despite providing the correct paths to the images, they're not displayed on the page. Strangely, when I manually use a single image with one sec, it works as expected.

I've ensured that the paths to the images are correct and that the images exist in the specified locations within my project directory.

Could someone please advise on what might be causing this issue and how I can resolve it? Any help or insights would be greatly appreciated.