英文:
<img>: force display of alt text on 404
问题
Consider a trivial HTML file:
<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>
Both images do not exist.
For the first image, the server returns a 404 with no content, and the browser displays the "ERROR" alt text as intended.
However, for the second image, the server returns a 404 status and also sends content, displaying the image in the content rather than the alt text.
Is there a way to force the alt text to be shown if the status indicates an error even if an image was sent in the content?
(I also tried using onerror but it isn't triggered in such cases.)
英文:
Consider a trivial HTML file:
<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>
Both images do not exist.
For the first image, the server returns a 404 with no content, and the browser displays the "ERROR" alt text as intended.
However, for the second image, the server returns a 404 status
but also sends content
and the image in the content is shown rather than the alt text.
Is there a way to force the alt text to be shown if the status indicates an error even if an image was sent in the content?
(I also tried using onerror but it isn't triggered in such cases.)
答案1
得分: 1
如果服务器返回404状态代码并将图像作为响应内容发送，<img> 元素的onload事件仍将被触发。在这种情况下，浏览器成功加载了图像资源，即使可能不是预期的图像，也不会触发onerror事件。
我可以想到两种可能的解决方案：
-
服务器端解决方案：不要直接从"https://thumbs.dreamstime.com/b/qqqqq.jpg"或"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) { //简单比较或使用第三方库进行深度比较 if (ele.width == 160 && ele.height == 160) { ele.src = "error"; } }
英文:
If the server returns a 404 status code and sends an image as the response content, the onload event will still be triggered for the <img> element. The onerror event will not be triggered in this case because the browser successfully loaded an image resource, even though it may not be the expected image.
I can think of two possible solutions for this situation:
-
Server-side solution: Instead of directly requesting the images from
"https://thumbs.dreamstime.com/b/qqqqq.jpg" or "https://iili.io/qqqqq.jpg", you can set up your own server. Modify the image response content on the server-side before sending it to the client. This way, you can control the behavior of the image and handle the error condition appropriately. -
Client-side solution: In the
onloadevent handler, you can check the loaded image and compare it with the error image. For example:<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"; } }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论