如果图像加载失败，则显示fa-icon

Question

如果图片加载失败，我想显示fa-icon。就像在alt属性文本中出现如果图像加载失败而不是我想要显示fa图标，如果有任何方式使用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

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

这是：

已更新

纯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);"/>

  

所以你需要替换的是字体的HTML结构，如果你还需要其他东西。

Answer 2

根据@ divy3993。你只需要在后台放置一个加载gif。

function imgError(image) {
    image.outerHTML= "<div class='red_block'></div>";
    return true;
}

.red_block {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;;
  padding: 110px;
}

<img src="image.png" onerror="imgError(this);"/>