如何替换HTML img坏图标

提问者：小点点

我有以下代码:

<img src="test.jpg" width="20" height="20"> some content here

未找到图像时，显示如下:

这种行为因浏览器而异。

我想显示透明框（纯白色）或一些好看的容器（空框），将看起来在所有浏览器相同。我试过用alt标记，但不起作用。

我怎样才能做到这一点呢？

演示:示例

匿名用户

您可以将error处理程序与onerror一起使用。但是请确保在调用onerror处理程序之后取消它，因为如果您的备份映像丢失，这将导致服务器请求的无限循环--这是不好的！像这样处理。。。

<img src="test.jpg" width="20" height="20" onerror="this.onerror=null;this.src='imageNotFound.gif';">

通过设置this.onerror=null；，我们可以防止服务器请求的无限循环。则如果图像存在，将为用户显示ImageNotFound.gif。

POD（来源:MDN Web Docs:GlobalEventHandlers.onError）。。。。

我们在函数中有this.onerror=null的原因是，如果onerror映像本身生成错误，浏览器将陷入无休止的循环中。

匿名用户

由于您使用的是Angular，您可以简单地使用onerror来显示回退/错误图像，以防无法加载初始的src:

<img [src]="invalidPath" onError="this.src='images/angular.png'"/>

匿名用户

您需要使用后端编程来确定路径是否存在，是否包含图像，然后显示它。如果路径不存在或不包含图像，则可以决定显示默认图像或您选择的任何组件。

在PHP中，您可以按如下方式进行:

<?php
    if (file_exists('test.jpg')) {
        echo "<img src='test.jpg'>";
    } else {
        echo "<img src='default.jpg'>";
    }
?>

共3个答案