html < img>：在404上强制显示alt文本

ecfsfe2w 于 2023-05-27 发布在其他

关注(0)|答案(1)|浏览(125)

考虑一个简单的HTML文件：

<html lang="en"><body>
<img src="https://thumbs.dreamstime.com/b/qqqqq.jpg" alt="ERROR"><br>
<img src="https://iili.io/qqqqq.jpg" alt="ERROR"><br>
</body></html>

这两个图像都不存在。
对于第一个图像，服务器返回没有内容的404，浏览器按预期显示“ERROR”alt文本。
但是，对于第二个映像，服务器返回404状态

但 * 也 * 发送内容

并且显示内容中的图像而不是ALT文本。
如果状态指示错误，即使在内容中发送了图像，是否有方法强制显示alt文本？
（我也尝试使用onerror，但在这种情况下不会触发。

Html

来源：https://stackoverflow.com/questions/76302466/img-force-display-of-alt-text-on-404

1条答案

按热度按时间

cygmwpex1#

如果服务器返回一个404状态码，并发送一个图片作为响应内容，<img>元素仍然会触发onload事件。在这种情况下不会触发onerror事件，因为浏览器成功加载了图像资源，即使它可能不是预期的图像。
对于这种情况，我可以想到两种可能的解决方案：

服务器端解决方案：您可以设置自己的服务器，而不是直接从"https://thumbs.dreamstime.com/b/qqqqq.jpg" or "https://iili.io/qqqqq.jpg"请求图像。在服务器端修改图像响应内容，然后发送到客户端。这样，您就可以控制图像的行为并适当地处理错误条件。
客户端解决方案：在onload事件处理程序中，可以检查加载的图像并将其与错误图像进行比较。例如：

<img src="https://thumbs.dreamstime.com/b/qqqqq.jpg" alt="ERROR" onload="handleLoad(this)" id="img1"><br>
<img src="https://iili.io/qqqqq.jpg" alt="ERROR" onload="handleLoad(this)" id="img2"><br>

function handleLoad(ele) {
  //simple comparison or use 3rd library for deep comparisons
  if (ele.width == 160 && ele.height == 160) {
    ele.src = "error";
  }
}

赞(0）回复(0）举报 2023-05-27

我来回答

html < img>：在404上强制显示alt文本

1条答案

相关问题

热门标签

最新问答