Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image filename/title is not dynamic when using Next/Image and external URLs #26737

Closed
JarrodMFlesch opened this issue Jun 29, 2021 · 4 comments · Fixed by #27521
Closed

Image filename/title is not dynamic when using Next/Image and external URLs #26737

JarrodMFlesch opened this issue Jun 29, 2021 · 4 comments · Fixed by #27521
Assignees
@styfle

Comments

@JarrodMFlesch
Copy link

JarrodMFlesch commented Jun 29, 2021 •
edited
Loading

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.15.5

What browser are you using?

Chrome/Brave

What operating system are you using?

macOS

How are you deploying your application?

Vercel, next start

Describe the Bug

When attempting to right-click download an image using Next/Image that is hosted outside of the static folder (i.e. a CMS), the title of the image is set to image for all images.

Expected Behavior

Images should right-click download with the name of the image, like locally hosted static images do.

To Reproduce

  1. create a new image using Next/Image
  2. use an externally hosted image src
  3. right-click download, the save as filename/title will read image
@JarrodMFlesch JarrodMFlesch added the bug Issue was opened via the bug report template. label Jun 29, 2021
@JarrodMFlesch JarrodMFlesch changed the title Image title is not dynamic when using Next/Image and external URLs Image filename/title is not dynamic when using Next/Image and external URLs Jun 29, 2021
@LetItRock
Copy link
Contributor

hi @JarrodMFlesch!
I've noticed that it's happening during the development for all the images used with Image component no matter if they are served from the public folder, cdn, etc., but not when I do deploy the app to Vercel.

The difference is that the images do have the content-disposition response header with the filename, then it's used by the browsers when showing the dialog for the Save Image As... action.

So, I guess it should be sent in the response by the Next server then, when handling requests in the /_next/image route.

@timneutkens @styfle wdyt?

@styfle styfle added kind: bug and removed bug Issue was opened via the bug report template. labels Jul 6, 2021
@styfle
Copy link
Member

styfle commented Jul 6, 2021

Yes, looks like we're missing the content-disposition header from the upstream server 👍

Would you like to create a PR with a test to fix it? 🙂

@LetItRock
Copy link
Contributor

Hi @styfle! Sure, I'll do that when I get my mac back from repairing :D

@LetItRock LetItRock mentioned this issue Jul 26, 2021
Merged
4 tasks
@styfle styfle self-assigned this Jul 26, 2021
@kodiakhq kodiakhq bot closed this as completed in #27521 Jul 27, 2021
kodiakhq bot pushed a commit that referenced this issue Jul 27, 2021
@LetItRock
Fix: Added the content-disposition header (#27521)
36b81f9 
In this PR I've added the `Content-Disposition` header to the response of the image `/_next/image` route. That header is used by the browser when showing the dialog for the `Save image as...` action. 

There are some differences between the browsers, ex:
When requesting the image `test.jpg`,  the response header `Content-Type: image/webp` - in FF the filename from the `Save image as...` dialog would be `test.webp` but in Chrome `test.jpg` even if the `Content-Disposition: inline; filename="test.webp"` is present in the headers.  The same about png images, the rest types are fine.  It looks like FF is checking the `Content-Type` for the extension but the Chrome does not and is doing another type of check.

Fixes #26737

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes
flybayer pushed a commit to blitz-js/next.js that referenced this issue Aug 19, 2021
@LetItRock
Fix: Added the content-disposition header (vercel#27521)
b16046f 
In this PR I've added the `Content-Disposition` header to the response of the image `/_next/image` route. That header is used by the browser when showing the dialog for the `Save image as...` action. 

There are some differences between the browsers, ex:
When requesting the image `test.jpg`,  the response header `Content-Type: image/webp` - in FF the filename from the `Save image as...` dialog would be `test.webp` but in Chrome `test.jpg` even if the `Content-Disposition: inline; filename="test.webp"` is present in the headers.  The same about png images, the rest types are fine.  It looks like FF is checking the `Content-Type` for the extension but the Chrome does not and is doing another type of check.

Fixes vercel#26737

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@styfle styfle

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Added the content-disposition header LetItRock/next.js
4 participants
@styfle @LetItRock @balazsorban44 @JarrodMFlesch