trailingSlash: true redirects /_next/image? to /_next/image/? for each image request

[SevdalinZhelyazkov]

What version of Next.js are you using?

10.0.2

What version of Node.js are you using?

12.4.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Other platform

Describe the Bug

When trailingSlash is set to 'true' the /_next/image directory used for serving optimized images is also affected.

Instead of requesting the resource on:
/_next/image?url=/uploads/...

the user is redirected with 308 to
/_next/image/?url=/uploads/...

This creates a huge amount of unnecessary redirects for a page full of images. I couldn't find any additional config options for the trailingSlash option whatsoever.

Expected Behavior

The optimized images path to not be redirected to a path with a trailing slash.

To Reproduce

1. Create a NextJS application.
2. Add a couple of next/image images.
3. Set trailingSlash to true.
4. Check the network tab and verify that the requests for the images have been redirected with status code 308.
5. Disable trailingSlash and verify that there are no redirects.

[NimitMak]

+1 Can reproduce the same bug, multiple 308 redirects and then leading to the error "url" parameter is required

[SevdalinZhelyazkov]

+1 Can reproduce the same bug, multiple 308 redirects and then leading to the error "url" parameter is required

The error "url" parameter is required is not related to this bug. You might have another problem in the code. It is worth checking here:

next.js/packages/next/next-server/server/image-optimizer.ts

Line 48 in 4dc32ec

if (!url) {

[NimitMak]

It's not that, i checked my request, it had url parameter, but after first 308 redirect, the url param was getting stripped from the request and then eventually getting "url" parameter is requried in the next call resulting in 400

[SevdalinZhelyazkov]

For those who have run into the same problem here is the solution.

I dug into the code for the image component and found how to fix the issue. You can predefine the path for the images in the next.config images configuration path by adding a trailing slash and the redirects stop: path: '/_next/image/'.

However, I didn't know I could do this, because as per the documentation it seems that one can only use the path property when configuring an external logic. Maybe the documentation should be extended with a sentence or two to explain how it works - not only in the loader section. Also since this is an internal behavior of NextJS, perhaps, it should be covered inside the code and the /_next/image route should be an exception from the rule for trailing slash.
https://nextjs.org/docs/basic-features/image-optimization#loader

[NimitMak]

For those who have run into the same problem here is the solution.

I dug into the code for the image component and found how to fix the issue. You can predefine the path for the images in the next.config images configuration path by adding a trailing slash and the redirects stop: path: '/_next/image/'.

However, I didn't know I could do this, because as per the documentation it seems that one can only use the path property when configuring an external logic. Maybe the documentation should be extended with a sentence or two to explain how it works - not only in the loader section. Also since this is an internal behavior of NextJS, perhaps, it should be covered inside the code and the /_next/image route should be an exception from the rule for trailing slash.
https://nextjs.org/docs/basic-features/image-optimization#loader

I tried adding path: '/_next/image/' in my next config file, but i am still getting similar error, i'll post some of the requests here so that you guys can help me out if i am doing something wrong.

The usual request with img tag gives 200

Request URL: https://mywebsite.com/images/static-pages/home/illustration-home.jpg
Request Method: GET
Status Code: 200

Path of the image is public/images/static-pages/home/illustration-home.jpg

The request with Image component gives 400

Request URL: https://mywebsite.com/_next/image/?url=%2Fimages%2Fstatic-pages%2Fhome%2Fillustration-home.jpg&w=1920&q=75
Request Method: GET
Status Code: 400

Response with Image component:
"url" parameter is required

Please help me know if I am doing anything wrong here or am i missing any param or something.

[eprothro]

images: {
    path: '/_next/image/', 
  }

In next.config .js stopped 308s for me as well.

[zhimng]

i'm using 12.1.0's next.js version, and it still have this problem.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.