后端返回图片资源错误404,前端使用默认图片

后端返回的图片资源可能会因为各种原因(后台误删,地址更改未及时更新,损毁)出现无法展示的情况,比如这种报错

就会导致图片资源错误,页面出现这种情况

用户体验很不好,为了改善这种情况,可以在资源加载的时候加个监听,如果图片加载失败就显示默认图片,如图:

其实就是给图片标签加个错误监听事件

html 复制代码
<div class="cam_per" v-for="(item,index) in camList" :key="index">
         <img class="imgs" :src="'http://smarteyes.dcyu.com/prod-api'+item.image" @error="onErrorImg"></img>
          
</div>

onerror监听图片加载失败

html 复制代码
onErrorImg(event) {
      event.target.src = require("@/assets/404_images/default_img.png");
    },

以上即可实现图片报错时展示默认图片

相关推荐
web守墓人2 小时前
【linux】Mubuntu v1.0.11更新日志
linux·前端
遇见你...5 小时前
TypeScript
前端·javascript·typescript
Highcharts.js5 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
懂懂tty8 小时前
CRA 迁移 Rspack(实战)
前端·架构
小码哥_常9 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea10 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_10 小时前
能不能别再弄低代码害人了
前端
朦胧之10 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫11 小时前
VTJ:快速开始
前端·低代码·架构
木斯佳12 小时前
前端八股文面经大全:携程前端一面(2026-04-17)·面经深度解析
前端·状态模式