Next.js: Next/image deploy at Firebase in static webpage

Created on 29 Oct 2020 · 8Comments · Source: vercel/next.js

Bug report

New next/images not works when deploy to firebase. At local (npm run dev) works fine, any problem.

Describe the bug

I get a 404 error and my images on production not works. I load from local (not use any layout as vercel or imgix).

I put all images at /public/img and in next.config.js try soo many path: 'XXXX' as default value path: '/_next/image',
and path:'/img/', path:'/_next/img/', etc etc,). Also move my img files to top of folder /public/ and don't use img folder.

Then try diferents values for src property:

<Image src="/img/XXXX.jpg" width={350} height={200} />
<Image src="/XXXX.jpg" width={350} height={200} />
<Image src="/image/XXXX.jpg" width={350} height={200} />
<Image src="/_next/image/XXXX.jpg" width={350} height={200} />

System information

OS: [e.g. Windows]
Browser (if applies) Chrome
Version of Next.js: [e.g. 10.0.0]
Version of Node.js: [e.g. v14.15.0.]

Source

fjdevesa

👍6

Most helpful comment

Same issue with Netlify

dkodeit on 1 Nov 2020

👍4

All 8 comments

Same problem here.
Looks like the next/image component relies on an internal API that cannot work on a static site, so the site generated by running next export just won't serve those images. Am I right?

dowrow on 30 Oct 2020

👀1

I just learned this the hard way now. All my images disappeared on staging. I would have caught this if I had run next export locally and testing the build. Now it makes sense why they wanted images to be in /public and not included using require(). Feel like this is a big oversight to exclude support for SSG.

Maybe someone can convert the server-side image optimizer function into a plugin. Would probably also mean that a customized/altered version of their next/image component as well