为什么 next/image 仅在本地发布后不调整图像大小？

Question

We are using next image for image optimization, we are having very weird issue and we are wondering if some of you faced similiar problem.

So to begin with in our code base we have code for rendering images which is

imageElements: screenshotImageUrls?.map((imageSrc: string) => {
            return (
              <Image
                src={imageSrc}
                alt=""
                height="190px"
                width="94px"
                quality={100}
              />
            );
          })

When we are on localhost enviroment looks like image resizing is working properly

Intrinsic size is: 96x170px

And when we deploy our app to our domain it looks like resizing is not working anymore and next image is loading full image size what is stored on remote server.

Intrinsic size is: 392x686px

Any idea what can couse this werid behaviour?

Answer 1

The next/image component's default loader uses squoosh because it is quick to install and suitable for a development environment. When using next start in your production environment, it is strongly recommended that you install sharp by running yarn add sharp in your project directory. This is not necessary for Vercel deployments, as sharp is installed automatically.

After installing sharp to our project finally image resizing work in production.

Answer 2

Try optimizing your image source URL because as per documentation there is a limit of A maximum of string length of 4,096 for the source and destination values.