next/image is not working for some images in production

[DabirRahmani]

Link to the code that reproduces this issue

https://github.com/DabirRahmani/nextjs-image-issue

To Reproduce

npm run build
npm run start
on production
these images are staticky on assets folder on project

Current vs. Expected behavior

hi there,
in production. i have an issue. image is not generated properly. i have 4 images exactly same in format. but 3 of them are not generated. when i click on image's link its as png. not webp. and the png is not showing anything.

image in production:
https://set.ir/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FmiddleSchool2.ea70b175.png&w=256&q=100

if i change the w in this link it show the image and it downloads the image as webp.
https://set.ir/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FmiddleSchool2.ea70b175.png&w=640&q=100

sth wrong with cached image or web generator

Provide environment information

this happends on nodejs on alpine

package json file
{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "update-status-code-based-on-backend-enum": "cd src/core/services && node convert-backend-enums-to-json.js"
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
    "axios": "^1.8.4",
    "cookies-next": "^5.1.0",
    "dayjs": "^1.11.13",
    "framer-motion": "^12.6.3",
    "jalaliday": "^2.3.0",
    "lucide-react": "^0.485.0",
    "next": "^15.3.0",
    "nextjs-toploader": "^3.8.16",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.55.0",
    "react-hot-toast": "^2.5.2",
    "react-intersection-observer": "^9.16.0",
    "react-leaflet": "^5.0.0",
    "react-markdown": "^10.1.0",
    "react-otp-input": "^3.1.1",
    "react-player": "^2.16.0",
    "swiper": "^11.2.5",
    "swr": "^2.3.3",
    "use-debounce": "^10.0.4",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "json-server": "^1.0.0-beta.3",
    "prettier": "^3.6.2",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

No response

_NEXT-4689

[hardik118]

Hi, I’d like to help investigate and fix this issue. Can you assign it to me?

[DabirRahmani]

Hi, I’d like to help investigate and fix this issue. Can you assign it to me?

i cant change the assignee @hardik118
what should i do

[hardik118]

Hi @DabirRahmani @chrislloyd @watsonian
Both myself and the issue author would like to work on this, but neither of us can assign the issue. Could you please assign it to me @hardik118 or let me know how I should proceed? Thank you

[icyJoseph]

@DabirRahmani do you mind trying to remove more from the example repository? Today it contains registry and other variables... could you please just reduce it to the four images, in the landing page? Is docker necessary to reproduce? if not, drop it too pls. If so, then it might be a hint about the issue, I wonder if sharp is installed correctly on the image, but let's see.

[DabirRahmani]

@DabirRahmani do you mind trying to remove more from the example repository? Today it contains registry and other variables... could you please just reduce it to the four images, in the landing page? Is docker necessary to reproduce? if not, drop it too pls. If so, then it might be a hint about the issue, I wonder if sharp is installed correctly on the image, but let's see.

i can’t reproduce the issue on staging—it’s only happening in production on external servers. i kept docker in the example repo because i thought it might help contributors debug the issue more effectively. if it turns out docker isn’t relevant, i’m happy to remove it.

i haven’t done anything custom with sharp. i’m just using next/image as-is. if you need more details to help debug this, let me know what exactly i should check or share. i’m happy to provide whatever’s useful.

[Grohden]

Hi, this one is preventing us from upgrading next (15.4.1 to 15.4.7.), which in turn prevents us from fixing some other security issues caused by nextjs. This one only happens in our review apps and staging environments, a local production build doesn't simulate it.. which is very annoying as deploy takes time

As a matter of fact, I know this started to happen when we upgraded from 15.4.1 to 15.4.2, I'll check if which diff might have caused it

My bad, its between 15.4.1 to 15.4.6, dependabot didn't update its title and confused me

[Grohden]

Its definitely between .4 and .5 v15.4.4...v15.4.5, just tested a couple deploys here

[Grohden]

I believe this is the error that gets thrown https://github.com/vercel/next.js/blob/v15.4.5/packages/next/src/server/image-optimizer.ts#L788 and this seems to point out to this PR #82118

[Grohden]

@styfle q: didn't you miss adding back the fallback for the detectContentType call here?https://github.com/vercel/next.js/pull/82118/files#r2237068149

it was previously:

const upstreamType =
    detectContentType(upstreamBuffer) ||
    imageUpstream.contentType?.toLowerCase().trim()

all in all, everything seems correct for dev, but once we deploy we get The requested resource isn't a valid image for /static/error/not-found-error.png received null

edit: seems that even if I restore the original fallback the end result is undefined

+    const _detected = await detectContentType(upstreamBuffer);
+    const upstreamType = _detected || imageUpstream.contentType?.toLowerCase().trim();
+    console.log("[esm] The requested resource isn't a valid image for", href, 'received', _detected, 'imgContentType', imageUpstream.contentType?.toLowerCase().trim())

// at the server:
[dist] The requested resource isn't a valid image for /static/error/not-found-error.png received null imgContentType undefined
 ⨯ The requested resource isn't a valid image for /static/error/not-found-error.png received undefined

[Grohden]

Issue is here #82114

This patch reverting it fixes for me:

diff --git a/node_modules/next/dist/esm/server/image-optimizer.js b/node_modules/next/dist/esm/server/image-optimizer.js
index a044050..1d9e0d0 100644
--- a/node_modules/next/dist/esm/server/image-optimizer.js
+++ b/node_modules/next/dist/esm/server/image-optimizer.js
@@ -676,6 +676,8 @@ export async function fetchInternalImage(href, _req, _res, handleRequest) {
         const mocked = createRequestResponseMocks({
             url: href,
             method: _req.method || 'GET',
+            // https://github.com/vercel/next.js/issues/82703
+            headers: _req.headers,
             socket: _req.socket
         });
         await handleRequest(mocked.req, mocked.res, nodeUrl.parse(href, true));
diff --git a/node_modules/next/dist/server/image-optimizer.js b/node_modules/next/dist/server/image-optimizer.js
index e6805d7..31d13e1 100644
--- a/node_modules/next/dist/server/image-optimizer.js
+++ b/node_modules/next/dist/server/image-optimizer.js
@@ -792,6 +792,8 @@ async function fetchInternalImage(href, _req, _res, handleRequest) {
         const mocked = (0, _mockrequest.createRequestResponseMocks)({
             url: href,
             method: _req.method || 'GET',
+            // https://github.com/vercel/next.js/issues/82703
+            headers: _req.headers,
             socket: _req.socket
         });
         await handleRequest(mocked.req, mocked.res, _url.default.parse(href, true));

@styfle @icyJoseph any guess as to why this is became an issue? or why its not the same behavior with prod build local vs prod build deployed somewhere?

I'm not familiar with next nor with the codebase, maybe the logic for external/internal images is wrong?

[icyJoseph]

Not sure it is the same issue OP reports here, as this ought to fail locally too - if that's your issue @Grohden - let's also track #82610 (comment)

[styfle]

@Grohden The patch from #82114 was fixing a security vulnerability. It was a bug that headers were ever forwarded so we removed them. I do not recommend adding it back or else your app could expose private images to unauthorized users.

See GHSA-g5qg-72qw-gw5v