Error next js 15 image component
Link to the code that reproduces this issue
https://codesandbox.io/p/github/Farruh-JS/next15_image_issue/master
To Reproduce
Codesandbox link: https://codesandbox.io/p/github/Farruh-JS/next15_image_issue/master Github link: https://github.com/Farruh-JS/next15_image_issue
I don't know why, but on Codesandbox everything worked fine for me, you should run this locally.
Current vs. Expected behavior
If you use the Next Image component, some random images will return a 500 error. However, if you render the same image with an img tag, it will work fine.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Binaries:
Node: 20.11.1
npm: 10.5.0
Relevant Packages:
next: 15.0.1
eslint-config-next: 15.0.0-canary.148
react: 19.0.0-rc-69d4b800-20241021
react-dom: 19.0.0-rc-69d4b800-20241021
typescript: 5
Next.js Config:
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'ik.imagekit.io' },
{
protocol: 'https',
hostname: 'storage.googleapis.com',
port: '',
pathname: '/polebor/site/media/original/**',
},
{ protocol: 'https', hostname: 'mp.softly.uz' },
],
},
Which area(s) are affected? (Select all that apply)
Image (next/image)
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
I tested my reproduction against different canary releases including latest 15.0.2-canary.6 version, and the first one that introduced the bug was "15.0.0", since reverting to "14.2.14" works. Also i have tried on my windows machine, got the same problem
Im having issues even importing images from my /public file nothing shows
Im having issues even importing images from my /public file nothing shows
Have you been able to fix this? I am facing the same issue.
A really quick fix I found is to use unoptimized: true in your nextConfig, as per Images in Next Config. This, however, obviously, will cause your images to be unoptimized, but at the least they will load.
Any news on this issue? I'm suffering the same. I resorted to the same fix and worked flawlessly. But would prefer to optimize in the future. Thanks!
Any updates on this issue? Optimize is not currently working.
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
For me it appears to be happening because of the 7s timeout set specifically in fetchExternalImage
https://github.com/vercel/next.js/discussions/72951
Happend in 14.2.5 with me with 1 image that was loading "forever".
- ✅ Checked that the file was generated in /.next/static/media
- Env = Prod
- Restarting the server fixed this ocorrence, so its "intermittent"
I've been facing this issue as well (15.5.4), especially in production Refreshing often fixes the issue but seems like reproducing this is very inconsistent.
Another workaround is using unoptimised=true in next.config but it's high time this gets fixed. Seems like this was an issue since v13. Found similar issues prior to this which have been closed due to inactivity or as "not-planned"