"Unable to optimize image and unable to fallback to upstream image"

[martinbrueckenwirt]

I use get this error when I try to load images from the public folder using a function to load the images. When I try to load the images directly via import {image} from '../.. /public' everything works fine. The error happens not always, I do not find a pattern of the error-situation.
Sometimes one single image doesn't load- error 400-bad request. Then you would see the error in the terminal window, the error is then thrown by node.js

This is the console.log of the result of the function.

In the provided file you see some images are loaded correctly - these are imported directly.

The error happens to *.jpegs and *.webp.
I am working on the latest version, using the app- directory.
In the image/component this is the code
{image1 && (
<Image className={styles.image}
src={image1.small}
alt={image1.alt}
quality = {75}
width = {940}
height ={705}
/*fill */
/>
)}

This is one of the images which loads when imported directly, but throws error when loaded via function.

"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.1",
"@types/node": "^20.10.6",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/parser": "^6.17.0",
"caniuse-lite": "^1.0.30001572",
"eslint": "^8.56.0",
"eslint-config-next": "^14.0.4",
"negotiator": "^0.6.3",
"next": "^14.0.5-canary.34",
"next-intl": "^3.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.0.0",
"typescript": "5.3.3"
},

[CaptainN]

I'm seeing the same thing. Did you find a solution? It doesn't do this in development, only in production.

[estubmo]

Are you using middleware?

When I defined middleware, I had to add a matcher for my public assets.

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|assets|favicon.ico).*)"],
}

Where assets is the folder containing images in my public folder. This is my structure: public/assets/images. And now every image within the assets folder and any of it's subfolders gets optimized.

[shyamala3]

Same for me
Any idea why it is happening...

[jeghaire]

Try this:
export const config = { matcher: ["/((?!api|_next/static|_next/image|.*\\.png$|.*\\.jpg$).*)" ]};