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

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

相关推荐
anOnion6 小时前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
用户47949283569156 小时前
claude Fable用不了?把Gpt 5.5pro接到你的claude code里
前端·后端
zhangxingchao9 小时前
Kotlin常用的Flow 操作符整理
前端
IT_陈寒11 小时前
React的useState居然还有这种坑?我差点删库跑路
前端·人工智能·后端
Pedantic12 小时前
SwiftUI 手势笔记
前端·后端
橙子家12 小时前
浏览器缓存之【结构化数据库与缓存】: IndexedDB、Cache storage 和 Storage buckets
前端
user205855615181312 小时前
X6 中边悬浮置顶,规避 `mouseleave` 事件丢失问题
前端
李明卫杭州12 小时前
CSS aspect-ratio 属性完全指南
前端
Pedantic14 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端