How to use the built-in component "Image" from "next/image" in a production environment?

[Yukixieyuya821]

Hey there, folks!!!

Recently, I've encountered an issue with using the built-in component "Image" from "next/image" in a production environment, where images are not loading correctly.

The issue occurs after packaging and installing the source code. Once opened, images fail to load.

The problem arises after running next export, as it generates static assets that cannot handle _next/image. This is because handling such requests requires a dependency on the Next.js server. To resolve this issue, you can redirect the URL to point to a Next.js server before sending the request. Of course, you must first deploy a Next.js server.

main/background.ts

After repackaging and reinstalling.

The images can now be loaded correctly on the page.

[bm777]

Hi @Yukixieyuya821 , I'm not familiar with .ts, can you provide an equivalent for background.js?

[Yukixieyuya821]

This code is consistent with js syntax

[bm777]

Hi @Yukixieyuya821 there is a normal workaround for this issue. Just adding domain in the next.config.js file like here

[Yukixieyuya821]

This solution is to solve the problem of images stored in third parties. If they are images from local projects, they cannot be mapped and require a next service.

[bm777]

right.
I think in my case, I was trying to access a file via another service (serving via fastapi)