使用带有头部 "Content-Disposition: attachment" 的源文件作为 <img> 标签的 src 值是否可行？

Question

16

有一个第三方API，具有一个端点http://endpoint/image_id，返回带有以下标头的响应：

content-disposition:attachment; filename=image.png
content-length:27774
content-type:image/png

根据MDN文档，在常规HTTP响应中，Content-Disposition响应头是一个指示内容是否应该在浏览器中以内联方式展示（即作为网页或网页的一部分）或作为附件（即下载并本地保存）的头。然而，我必须像这样使用它：

<img src="http://endpoint/image_id">

在Chrome中，对我来说它工作正常，我可以看到图像。但我对此表示怀疑。这样可以吗？

- Mikhail Batcer

3

我正在投票关闭这个问题，因为它请求进行代码审查（http://codereview.stackexchange.com/help/on-topic）。 - Quentin

4

@Quentin，在我看来，你似乎没有阅读你提供的链接或者我的问题（或者两者都没有？），因为这个问题是普遍适用的，而不是关于特定代码片段的。 - Mikhail Batcer

关键是，通过一些小的调整，它将适合于代码审查。 - Quentin

1

@Quentin 我认为你应该再次阅读Code Review中问题被视为主题的标准。而且，实际上，我的问题即使没有任何“代码”（它只有1个HTML标记），也会非常清晰明了。 - Mikhail Batcer

2

我建议您传递一些额外的参数，或使用替代的终端点，以便进行下载或内联使用，因为仅仅因为不想改变而传递错误的元数据是一件坏事。 - Asons

显示剩余3条评论

2个回答

1

它能够正常工作是因为Chrome足够智能，可以判断你正在网页内使用它，并且没有显示“另存为”对话框。但是，为什么要冒险使用它呢？

content-disposition:attachment;

你应该使用以下代码：

Content-Disposition: inline

还有一个类似于您问题的 Stack Overflow 问题，其中有相似的答案解释了使用附件而不是内联的区别，请查看this问题的批准答案。

- Fady Sadek

2

问题在于，我不应该更改此标题，因为它在其他地方用于实际下载图像。 - Mikhail Batcer

1

你可以进行多个HTTP请求，一个用于下载这些图片，另一个用于将它们内联使用。 - Fady Sadek

2

如果我无法控制“Content-Disposition”头怎么办？ - belkka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nico · Accepted Answer

如果可行与否并不那么简单。这是因为它涉及到两个不同的标准：HTML规范和HTTP协议规范。所以有些灰色地带。这取决于用户代理如何决定响应。

根据HTTP标准，响应头指示文件应被视为附件。

然而，在这里：https://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html也提到："如果在响应中使用此头部并且设置了“attachment”类型，则暗示建议是用户代理不应显示响应，而是直接输入“保存响应为...”对话框。"

更新: RFC 6266指出，不再需要限制内容类型为application/octet-stream

所以你的内容类型在技术上将该决定留给了用户代理（在这种情况下是Chrome），以显示内容或不显示内容。

我们现在正在达成浏览器之间某种平衡，所以为了做出明智的选择，我建议您进行跨浏览器测试。

理想情况下，这将在您的CI工作流程中通过一些工具（如souce labs或您自己的解决方案）进行。

另一个快速选择是将简单的HTML示例上传到像GitHub这样的主机中，并从诸如此类的页面（https://www.browserling.com/）导航到原始文件，该网页可以让您使用不同的操作系统和浏览器浏览特定的URL。