带有 json src 的 img html 标签会发生啥？

Posted 2023-03-04

【中文标题】带有 json src 的 img html 标签会发生啥？

【英文标题】：What happens to an img html tag with a json src?带有 json src 的 img html 标签会发生什么？

【发布时间】：2017-07-11 20:31:46

【问题描述】：

如果来自服务器的响应不是有效的 img（例如 JSON），img html 标记 (<img src="address-to-server-action">) 会发生什么情况。浏览器会抛出解析错误吗？所有浏览器都有相同的行为吗？ img是否隐藏有关系吗？

我实际上只是想从只提供 JSON 服务的跨域服务器中引入一个 cookie。

【参考方案1】：

浏览器将显示替代文本。浏览器可能会通知用户图像未正确加载。

您可以隐藏图像（显示：无；）并且它不会显示。

您可以按照http://www.ainixon.me/set-cookie-on-cross-domains/ 中的说明设置跨域cookie。

【参考方案2】：

如果您尝试类似 <img src="http://example.com/some.json"> 并希望从中返回 JSON 会发生什么，浏览器不会让您这样做。如果src 值不是浏览器支持的有效图像，它就不会显示它，也不会让你对响应做任何其他事情。

这就是浏览器的工作方式和行为is documented in the HTML spec，它引用the request algorithm in the Fetch spec，其中一个属性是请求mode。

除非使用特定模式集执行提取，否则使用默认模式no-cors。而the HTML spec algorithm for image requests 没有设置任何其他模式，所以他们是no-cors。

并且对no-cors 请求的响应由浏览器处理为opaque filtered responses，这意味着从您可能在网络应用程序中尝试的任何客户端javascript 代码中，您将无法访问任何信息/属性回应。

【讨论】：

即使浏览器不让我访问响应，cookie 仍然是由浏览器设置的，所以这正是我所需要的。您知道是否有任何标准可以确保设置 cookie？还有一个问题，我尝试了 3 种不同的浏览器，当图像解析失败时，它们都没有显示错误，只是一个占位符而不是图像（这很棒）；你知道这有什么标准吗？

关于图像损坏时的浏览器要求，请参阅html.spec.whatwg.org/#updating-the-image-data:img-error-7，它表示在img 元素处触发了一个名为error 的事件。规范没有规定浏览器必须对接收error 事件的img 元素执行什么操作（尽管您的应用程序代码可以设置一个事件侦听器来处理它），但在html.spec.whatwg.org/#the-img-element:attr-img-alt-3 规范有一些“用户代理可能会向用户提供……”当图像损坏时该怎么做的案例。这些都没有说要向用户显示错误