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

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

相关推荐
前端进阶者4 分钟前
electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
前端·electron
Jimmy7 分钟前
使用 Electron 在 5 分钟内创建一个桌面的 React 应用
前端·javascript·electron
玲小珑10 分钟前
LangChain.js 完全开发手册(二)Prompt Engineering 与模板系统深度实践
前端·langchain·ai编程
QBorfy17 分钟前
5分钟AI,每天搞懂一个知识点(1) - 监督学习
前端·人工智能
白龙马云行技术团队22 分钟前
性能治理之页面LongTask优化
前端
Ankkaya23 分钟前
开发小结(08.11-08.16)
前端·uni-app
Hilaku23 分钟前
前端监控实战:从性能指标到用户行为,我是如何搭建监控体系的
前端·javascript·性能优化
咖啡の猫24 分钟前
Shell脚本-影响shell程序的内置命令
前端·chrome·bash
sorryhc37 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia1 小时前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc