PNG image not displaying in a React web app

I am having issues displaying some png image in a web app of mine, using NextJS and React.

The problem appears when I want to display some graphic png file. If I use for test, an svg file (globe.svg provided when running the "npx create-next-app@latest" command) instead, then the image is perfectly displayed.

Of course I know that the (png) image I want to display exists.

I also have other apps where I use png files in an apparently similar way with no issue.

This is what I can see in the web developer console of the web browser:

GET https://myapp.web.app/_next/image?url=/_next/static/media/SlideShow60.e25ce20d.png&w=64&q=75
Headers:
Status            404
Version           HTTP/3
Transferred       2.67 kB (7.48 kB size)
Referrer Policy   strict-origin-when-cross-origin
Request Priority  Highest
DNS Resolution    System

How could I solve this problem and make my image appear as expected ?

Below is the TypeScript code related to this issue:

import sldShwImg from '../../public/SlideShow60.png';
export default function SldShwBtn({action}:{action: () => void}) {
return (
<div>
<Image src={sldShwImg}
alt="Slide-Show-Button"
width={60}
height={60}
onClick={() => {console.log('Slide-Show-Image')}} />
<img src={require('../../public/SlideShow60.png')} />
</div>
)
} /* End of SldShwBtn */

In the code above neither of the lines :

<Image src=..../>

or:

<img src={require....} />

is working to bring up the image display.

I hope that someone will spot a possible issue or a detail that I might be overlooking.

Thanks in advance for any relevant tip.