图片加载失败时显示Font Awesome图标实现方案咨询

其实核心思路很简单：监听图片的error事件，当加载失败时，把图片替换成（或者在图片位置插入）Font Awesome图标就行。下面给你两种具体的实现方案，结合你的现有代码来调整：

方案一：原生JavaScript（无需依赖jQuery） #

首先，先修正你图片标签里重复的class属性（你写了两次class='img-thumbnail'，保留一个就行），然后给图片加上onerror事件处理函数：

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

然后在页面的<script>标签里添加这个处理函数：

function showFallbackIcon(imgElement) {
    // 隐藏加载失败的图片
    imgElement.style.display = 'none';
    // 创建Font Awesome图标元素
    const fallbackIcon = document.createElement('i');
    // 设置图标类名（这里用你原来的视频摄像头图标，可根据需求修改）
    fallbackIcon.className = 'fa fa-video-camera fa-3x';
    // 可以给图标加样式，比如和背景匹配的颜色
    fallbackIcon.style.color = '#fff';
    // 把图标插入到图片的父容器里
    imgElement.parentNode.appendChild(fallbackIcon);
}

方案二：jQuery（更简洁） #

如果你已经引入了jQuery，用这个方案会更省心。首先给图片加一个专属类名（比如presentation-img）方便选择：

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

然后在页面加载完成后绑定error事件：

$(document).ready(function() {
    // 监听所有目标图片的加载失败事件
    $('.presentation-img').on('error', function() {
        // 直接把失败的图片替换成Font Awesome图标
        $(this).replaceWith('<i class="fa fa-video-camera fa-3x" style="color: #fff;"></i>');
        // 如果你不想替换，而是隐藏图片后插入图标，可以用下面这行：
        // $(this).hide().parent().append('<i class="fa fa-video-camera fa-3x" style="color: #fff;"></i>');
    });
});

几个注意点： #

• 确保你的页面已经正确引入了Font Awesome的CSS文件（看你原来的代码已经在使用fa类，应该已经引入了，但如果图标不显示，先检查这个）
• 可以调整图标的大小（比如fa-2x、fa-3x）或者自定义CSS样式，让图标和原来的图片尺寸匹配（你的图片是165px宽，fa-3x大概是48px，可根据需要调整）
• 你原来的代码里fa fa-video-camer...应该是打错了，正确的类名是fa fa-video-camera

内容的提问来源于stack exchange，提问作者Rahul