I have been using the new Image tag that has come out with the latest version of nextjs (v10.0.0) - Basic Features: Image Optimization | Next.js. The images however do not load. The images are fetched from a headless CMS (Wordpress headless CMS). The only images that load are static ones where I have not used the new Image tag but the standard img tag. Here is a link to the website - https://infallible-pare-905b23.netlify.app. Here is the same site on Vercel where my images load fine - https://taskpro-website.vercel.app. Any help would be appreciated. Thanks!
Hi, @ziyak97. The non-working image URLs appear require some backend function to handle the fetching of the image.
Here is an example URL:
https://infallible-pare-905b23.netlify.app/_next/image?url=https%3A%2F%2Fbackend.taskproservices.com%2Fwp-content%2Fuploads%2F2020%2F09%2Fcustomer-support.svg&w=320&q=75
There is no site function configured at this path above. The file itself doesn’t exist so the URL above returns a 404 response. I do see functions configured for the site here:
https://app.netlify.com/sites/infallible-pare-905b23/functions
However, there is no redirect rule to direct the URL above to any of those functions. I also don’t know if those any of functions are the required functions or not.
To summarize, there are two requirements for this URL to display the file:
- create the Function to process those image URLs and return the image
- create a redirect to point the URL above to the function created
I don’t know enough about your site to know if the first requirement is met or not. The second requirements is not met. There is no redirect to any function for the path in the example URL.
​Please let us know if there are other questions about this or more we can do to assist.
Hey, @luke. The backend url required is fetched via my headless CMS. I use getStaticProps in order to fetch my data and don’t use any functions. Here is a link to my repository - GitHub - ziyak97/takpro-website. If I replace the next/image feature with the standard img tag my images display just fine so I was thinking it could be an issue with how I setup my next-on-netlify?
EDIT: This is a known issue as refered here - Next/image deploy at Firebase in static webpage · Issue #18507 · vercel/next.js · GitHub.
I was about to report the same problem. I tried using next/image to serve an image currently located in my /public folder. Works fine in my localhost, but ends up not being displayed on Netlify.
Apparently it’s being investigated.
1 Like
Hi, @ziyak97 and @the_bammer. This is a limitation of Next.js. This image loader requires next start to functions. Running next start requires a node.js application server (which doesn’t exist outside of Functions at Netlify).
The developer on that GitHub issues is planing on simply logging this fact by printing the following message:
next export cannot be used with Next.js' default image loader, as it relies on `next start`.
To summarize, you cannot next export using this image loader. This is a Next.js limitation, not a Netlify issue.
4 Likes
@luke Just to clarify. This means the way NextJS implemented this feature, the tag cannot and will not be supported on Netlify?
Hi, @chrisellis. Whether or not it is supported is not determined by Netlify. Netlify is designed for deploying Jamstack sites.
If you use a static site generator (SSG) to create a static version of your site, as opposed to a server-side rendering (SSR) version, then you can deploy a site to Netlify.
Based on the GitHub issue above, my understanding is that it is next export itself which doesn’t support this image loader. This is a next export doesn’t support this and it has nothing to do with Netlify.
Here is my analogy (and, warning, some people say I’m bad at analogies). Say you had a gasoline powered car and you asked, “Can I put diesel fuel in my gasoline car’s fuel tank in the country of Peru?” I might answer, “No, gasoline engines do not support running on diesel fuel.” This does not mean that Peru doesn’t support putting diesel in the gasoline car. It has nothing to do with Peru. It is a limitation of the engine and doesn’t have anything to do with the country itself.
Personally, I know of no workarounds to make this image loader work with next export. It is often possible to use Netlify Functions to perform SSR for static sites but how that is done varies from SSG to SSG. I mention this because it is, at least hypothetically speaking, possible that there is some workaround using Functions to do this. Again, even if there is such a workaround possible, I do not personally know any details about how that might be done with this specific SSG and image loader.
To summarize, this does appear to be a limitation of the SSG itself. About if using this image loader at Netlify is possible, that would require some workaround for this SSG and I don’t personally know of any way to do that.
Also, @lindsaylevine, would you happen to have any input on this issue below?
next exportcannot be used with Next.js’ default image loader, as it relies onnext start
I’m in no way an Next.js expert and, if I’m not mistaken, you are. 
I was wondering if you had possibly seen this issue before and, if so, if you might have a solution/workaround for this.
@luke Thanks for getting back. That makes sense. I ejected to a plain old img tag for now. No webp for me.
@luke @chrisellis hey all, Next 10 <Image /> compatibility is on our to-do list to support in next-on-netlify! that said, it’s not our top priority at this exact moment so hard to give you an ETA :(. there’s an open issue currently on next-on-netlify if you’d like to track there!
luke, with regards to next export, yes, i believe that’s accurate. from the docs:
Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them.
and
Works automatically with
next dev,next start, or a custom server
basically confirms the need of some run-time server/functionality for this feature.
1 Like
For anyone else that comes here the direct issue link is here: Support for Next/Image · Issue #70 · netlify/next-on-netlify · GitHub
The closest idea seems to be using Large Media overview | Netlify Docs however that may not be good for those of us sourcing from a CMS on build – meaning it’s not in our repository.
Hi - is using an tag the solution as of right now? thanks
Looks like initial support has been added via next-on-netlify in version v2.8.0 → Publish v2.8.0 · netlify/next-on-netlify@ba22d52 · GitHub