后端返回图片资源错误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");
    },

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

相关推荐
泯泷34 分钟前
手搓JSVM第 12 篇:完整最小 JSVM 实现与源码设计复盘
前端·javascript·前端框架
默_笙1 小时前
🍔 给 AI 发一张结构化表格(下):从"自由发挥"到"按格填空"的输出驯服指南
前端·javascript
泯泷1 小时前
手搓JSVM第 11 篇:打包、模块与 CLI:把 VM 产物变成可运行文件
前端·javascript·前端框架
泯泷1 小时前
手搓JSVM第 10 篇:对象、数组与属性访问
前端·javascript·前端框架
泯泷1 小时前
手搓JSVM第 9 篇:闭包:函数如何记住外部变量
前端·javascript·前端框架
晴天162 小时前
前端 SSR、BFF 原理介绍
前端·javascript·网络·html
全栈技术负责人2 小时前
AI 效能工具建设:Agent 可观测性技能技术方案与实践
前端·ai·ai编程
梦想平凡2 小时前
百游棋牌源代码开发搭建教程(一):全端工程结构、开发环境配置与首次启动验证
前端·javascript·源代码管理
妙码生花3 小时前
两个月 59 篇 AI 开发日志 + Golang 商业级实战项目收工后,得来的 AI 使用心法-上
前端·后端·gin
vx-Biye_Design3 小时前
springboot中国传统节日宣传平台49078-计算机课程设计、毕业设计
java·前端·vue.js·spring boot·后端·课程设计·idea