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

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

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

 

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

 

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

<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监听图片加载失败

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/72610.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流弊的docker

docker就是隔离式运行软件组&#xff08;多个软件&#xff09;&#xff0c;docker分为dockerfile文件&#xff0c;images 镜像&#xff0c;容器&#xff0c;本地仓库&#xff0c;远程仓库。 构建dockerFile文件&#xff0c;可以获得images镜像 运行镜像获得容器 || 容器提交获得…

Spring Bean的生命周期总结(包含面试题)

目录 一、Bean的初始化过程 1. 加载Spring Bean 2. 解析Bean的定义 3. Bean属性定义 4. BeanFactoryPostProcessor 扩展接口 5. 实例化Bean对象 6. Aware感知 7. 初始化方法 8. 后置处理 9. destroy 销毁 二、Bean的单例与多例模式 2.1 单例模式&#xff08;Sin…

小航助学GESP_C++一级模拟测试卷第3套(含题库答题软件账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSDN博客 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSD…

05-微信小程序常用组件-表单组件

05-微信小程序常用组件-表单组件 文章目录 表单组件button 按钮案例代码 form 表单案例代码 image 图片支持长按识别的码案例代码 微信小程序包含了六大组件&#xff1a; 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设…

计算机视觉的应用10-图片中的表格结构识别与提取实战

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用10-图片中的表格结构识别与提取实战&#xff0c;表格结构识别在信息处理领域中具有广泛应用&#xff0c;但由于表格的多样性和复杂性&#xff0c;以及难以准确解析的布局和格式&#xff0c;传统的方…

C#__使用Type类反射数据的基本用法

// 简单介绍 // 元数据&#xff08;metadata&#xff09;&#xff1a;与程序及其类型有关的数据。 // 反射&#xff1a;一个运行的程序查看本身元数据或其他程序集中的元数据的行为 // Assembly类&#xff1a;允许访问给定程序集的元数据&#xff0c;包含了可以加载和执行程序…

类与对象(上)

类与对象&#xff08;上&#xff09; 一、面向过程和面向对象的区别二、类1、类的引入2、类的定义&#xff08;1&#xff09;类的基本定义&#xff08;2&#xff09;类的成员函数的定义方法 3、类的访问限定符4、封装5、驼峰法命名规则6、类的作用域7、类的实例化&#xff08;1…

TCP服务器实现—多进程版,多线程版,线程池版

目录 前言 1.存在的问题 2.多进程版 3.多线程版 4.线程池版 总结 前言 在上一篇文章中使用TCP协议实现了一个简单的服务器&#xff0c;可以用来服务端和客户端通信&#xff0c;但是之前的服务器存在一个问题&#xff0c;就是当有多个客户端连接服务器的时候&#xff0c;服…

强强联手:Eyeshot 2023.2 集成 CAD Exchanger SDK 3.21 Crack

Lab 中的新绘图模式和网格抽取、Eyeshot 集成以及从 CAD Exchanger 3.21.0 中的 CATIA 导入图形 PMI 通过探索新的绘图模式和可调整的网格抽取&#xff0c;更深入地了解实验室&#xff0c;见证与 devDept Eyeshot 的无缝集成&#xff0c;并直接从 CATIA 导入图形 PMI。 今年 8…

linux——MongoDB服务

目录 一、MongoDB概述 相关概念 特性 应用场景 二、目录结构 三、默认数据库 admin local config 四、数据库操作 库操作 文档操作 五、MongoDB数据库备份 一、备份 mongodump mongoexport 二、恢复 mongorestore mongoimport ​编辑 一、MongoDB概述 MongoDB是…

游乐场vr设备虚拟游乐园vr项目沉浸体验馆

在景区建设一个VR游乐场项目可以为游客提供一种新颖、刺激和沉浸式的游乐体验。提高游客的体验类型&#xff0c;以及景区的类目&#xff0c;从而可以吸引更多的人来体验。 1、市场调研&#xff1a;在决定建设VR游乐场项目之前&#xff0c;需要进行市场调研&#xff0c;了解当地…

【Linux】IO多路转接——poll接口

目录 poll初识 poll函数 poll服务器 poll的优点 poll的缺点 poll初识 poll也是系统提供的一个多路转接接口。 poll系统调用也可以让我们的程序同时监视多个文件描述符上的事件是否就绪&#xff0c;和select的定位是一样的&#xff0c;适用场景也是一样的。 poll函数 po…