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

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

相关推荐
程序员猫哥9 小时前
前端开发,一句话生成网站
前端
Younglina9 小时前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员9 小时前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
卖火箭的小男孩9 小时前
# Flutter Provider 状态管理完全指南
前端
小雨青年9 小时前
鸿蒙 HarmonyOS 6|ArkUI(01):从框架认知到项目骨架
前端
Null1559 小时前
浏览器唤起本地桌面应用(基础版)
前端·浏览器
pas13610 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
wordbaby10 小时前
TanStack Router 实战:如何构建经典的“左侧菜单 + 右侧内容”后台布局
前端·react.js
oMcLin10 小时前
如何在 RHEL 7 上优化 Nginx 与 PHP‑FPM 配置,确保高并发 Web 应用的稳定性与响应速度?
前端·nginx·php
Taiyuuki10 小时前
WebGPU 开发者福音!在 VS Code 中实时预览你的WGSL着色器作品
前端·gpu·图形学