javascript - 图片加载失败时显示 fa-icon

Question

我想在图像加载失败时显示 fa 图标。就像在 alt 属性文本中出现一样，如果图像加载失败，我想显示一个 fa-icon，如果有任何方法使用 js/jquery 等，请分享。 我正在使用的代码:

<div class="panel-body text-center" style="background-color:#f99d1c;">
                        <?php if($count>0){
                            echo "<img src='/presenations/$company/$curl/$fileurl' class='img-thumbnail' width='165px' class='img-thumbnail' alt='ERR_RLF'>";
                        }else{
                            echo "<i class='fa fa-video-camera fa-4x' style='color:#FFF;'></i>";
                        }?>
                        </div>

Answer 1

我认为您正在寻找 img 元素的 onerror 属性。

这是:

已更新

纯JS解决方案

function imgError(image) {
    image.outerHTML= '<i class="fa fa-video-camera fa-4x"></i>';
    return true;
}

.red_block {
  background: red;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<!-- Image element with invalid path so it does not load and onerror gets call -->
<img src="image.png" onerror="imgError(this);"/>

<br>
<!-- Same thing with valid image path so it loads -->
<img src="http://via.placeholder.com/350x150" onerror="imgError(this);"/>

So what you need to replace here is HTML structure of fonts if you want anything else than this.