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

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

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 /_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 am having issues displaying some png image in a web app of mine, using Next.js and React.

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

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.

• reactjs
• next.js

• Hi, as per my understanding your PNG file should be in the public folder in Next.js (not inside public/ or similar), and also please check for any typo and image path while importing image. You can use it Like this src="/SlideShow60.png" // Note: path is relative to public folder – Bhavesh Kumar Sharma Commented Mar 31 at 8:09
• Yes there is a public folder at the top of my project as always. And my file is there. But it doesn't work. – Michel Commented Mar 31 at 15:17

1 Answer 1

When using public folder you don't need to use relative path (../..). Try to use absolute path like this /SlideShow60.png.