next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Error next js 15 image component

Open Farruh-JS opened this issue 1 year ago • 1 comments

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.

image

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

Farruh-JS avatar Oct 25 '24 04:10 Farruh-JS

Im having issues even importing images from my /public file nothing shows

Keoooo avatar Dec 03 '24 16:12 Keoooo

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.

AbidemiT avatar Jan 07 '25 13:01 AbidemiT

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.

mh-anwar avatar Feb 25 '25 07:02 mh-anwar

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!

Helvin159 avatar Mar 11 '25 00:03 Helvin159

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!

ehnsio avatar Apr 01 '25 12:04 ehnsio

For me it appears to be happening because of the 7s timeout set specifically in fetchExternalImage https://github.com/vercel/next.js/discussions/72951

InkaAlicja avatar Apr 24 '25 13:04 InkaAlicja

Happend in 14.2.5 with me with 1 image that was loading "forever".

  1. ✅ Checked that the file was generated in /.next/static/media
  2. Env = Prod
  3. Restarting the server fixed this ocorrence, so its "intermittent"

Cauen avatar May 27 '25 12:05 Cauen

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"

plushexe351 avatar Nov 07 '25 22:11 plushexe351