后端返回图片资源错误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.mzph.cn/news/44301.shtml

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

相关文章

Webpack node、output.jsonpFunction 配置详解

Webpack node、output.jsonpFunction 配置详解 最近尝试给一些用到 webpack 的项目升级到最新 webpack5 版本&#xff0c;其中遇到了一些问题&#xff0c;我挑了两个比较典型的问题&#xff0c;其中主要涉及到了 webpack 的 node 属性跟 output.jsonpFunction &#xff08;web…

认识Axios

axios中文网 一. 为什么会诞生Axios 最初浏览器页面向服务器请求数据时&#xff0c;返回的是整个页面&#xff0c;整个页面都会刷新ajax的出现&#xff0c;它可以在页面无刷新的情况下请求数据原生的XMLHttpRequest&#xff0c;jQuery封装的ajax&#xff0c;以及axios都可以实…

我能“C”——数据的存储

目录 1. 数据类型介绍 1.1 类型的基本归类&#xff1a; 2. 整形在内存中的存储 2.1 原码、反码、补码 2.2 大小端介绍 2.3 练习 3. 浮点型在内存中的存储 3.1 一个例子 3.2 浮点数存储规则 1. 数据类型介绍 char // 字符数据类型 short // 短整…

解决多模块内核心模块有接口打包成jar后被依赖并调用遇到的问题(springcloud集成ruoyi.quartz)

项目准备开发个新功能&#xff0c;刚好很喜欢ruoyi写的任务调度&#xff0c;因此想到了集成ruoyi.quartz模块 &#xff0c;遇到了很多问题: 首先因为ruoyi.quartz模块依赖了ruoyi.common模块&#xff0c;因此第一步我需要把common模块一部分依赖项复制到了quartz模块内&#xf…

torch框架学习过程遇到问题

PyTorch框架 一些用法下划线后缀torch.nn.conv2d和torch.nn.functional.conv2d的区别 函数torch.函数名scatter函数 其他模型的不同模式:train,eval,infer读取和保存tensor 一些用法 下划线后缀 在 PyTorch 中&#xff0c;使用下划线后缀的函数通常表示就地修改&#xff08;i…

Selenium的使用:WEB功能测试

Selenium是ThrougthWorks公司一个强大的开源WEB功能测试工具系列&#xff0c;本系统包括多款软件 Selenium语言简单&#xff0c;用(Command,target,value)三种元素组成一个行为&#xff0c;并且有协助录制脚本工具&#xff0c;但Selenese有一些严格的限制&#xff1a; …

深入浅出Pytorch函数——torch.nn.init.calculate_gain

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…

创建和运行 Ansible 临时命令

创建和运行 Ansible 临时命令 作为系统管理员&#xff0c;您需要在受管节点上安装软件。 请按照正文所述&#xff0c;创建一个名为 /home/curtis/ansible/adhoc.sh 的 shell 脚本&#xff0c;该脚本将使用 Ansible 临时命令在各个受管节点上安装 yum 存储库&#xff1a; 存储库…

mysql的隐式连接和显式连接的区别

隐式连接&#xff08;Implicit Join&#xff09;和显式连接&#xff08;Explicit Join&#xff09;是 SQL 查询中用于联结多个表的两种不同语法方式。它们的区别主要体现在语法的书写风格和可读性上。 隐式连接&#xff1a; 隐式连接使用逗号 , 将多个表名放在 FROM 子句中&am…

k8s的pv和pvc创建

//NFS使用PV和PVC 1、配置nfs存储 2、定义PV 实现 下图的pv和pvc测试 pv的定义 这里定义5个PV&#xff0c;并且定义挂载的路径以及访问模式&#xff0c;还有PV划分的大小 vim /pv.yamlapiVersion: v1 kind: PersistentVolume metadata:name: pv001 spec:capacity:storage: …

TiDB数据库从入门到精通系列之四:SQL 基本操作

TiDB数据库从入门到精通系列之四&#xff1a;SQL 基本操作 一、SQL 语言分类二、查看、创建和删除数据库三、创建、查看和删除表四、创建、查看和删除索引五、记录的增删改六、查询数据七、创建、授权和删除用户 成功部署 TiDB 集群之后&#xff0c;便可以在 TiDB 中执行 SQL 语…

● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划

1143.最长公共子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {int res0;vector<vector<int>> dp(text1.size() 1, vector<int>(text2.size() 1, 0));for (int i 1; i < text1.size(); i) {for (int j 1…

Linux网络编程(epoll的ET模式和LT模式)

文章目录 前言一、ET模式和LT模式概念讲解1.水平触发模式&#xff08;LT&#xff0c;Level-Triggered&#xff09;2.边缘触发模式&#xff08;ET&#xff0c;Edge-Triggered&#xff09; 二、边缘触发和水平触发适用的场景总结 前言 本篇文章主要来讲解epoll的ET模式和LT模式&…

原型和原型链

好久没记了有点忘记了&#xff0c;来记录一下。 1、函数和对象的关系&#xff1a;对象都是通过函数创建的&#xff0c;函数也是一个对象。 2、原型和原型链 1.原型&#xff1a;原型分为两种 prototype&#xff1a;每一个函数都会有prototype属性&#xff0c;它指向函数的原型…

Three.js程序化3D城市建模【OpenStreetMap】

对于我在 Howest 的研究项目&#xff0c;我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。 我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中&#xff0c;随后我将对其进行动画处理 推荐&#xff1a;用 NSDT编辑器 快速搭…

C++坦克大战源代码

源码: #include <iostream> #include <time.h> #include <windows.h>#define W 1 //上 #define S 2 //下 #define A 3 //左 #define D 4 //右 #define L 5 // 坦克有4条命void HideCursor() { //隐藏光标 …

Flask-flask系统运行后台轮询线程

对于有些flask系统&#xff0c;后台需要启动轮询线程&#xff0c;执行特定的任务&#xff0c;以下是一个简单的例子。 globals/daemon.py import threading from app.executor.ops_service import find_and_run_ops_task_todo_in_redisdef context_run_func(app, func):with …

【会议征稿信息】第二届信息学,网络与计算技术国际学术会议(ICINC2023)

2023年第二届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2023) 2023 2nd International Conference on Informatics,Networking and Computing (ICINC 2023) 2023年第二届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2023)将于2023年10月27-29日于中国武汉召…

首起针对国内金融企业的开源组件投毒攻击事件

简述 2023年8月9日&#xff0c;墨菲监控到用户名为 snugglejack_org (邮件地址&#xff1a;SnuggleBearrxxhotmail.com&#xff09;的用户发布到 NPM 仓库中的 ws-paso-jssdk 组件包具有发向 https://ql.rustdesk[.]net 的可疑流量&#xff0c;经过确认该组件包携带远控脚本&a…

.NET Core6.0使用NPOI导入导出Excel

一、使用NPOI导出Excel //引入NPOI包 HTML <input type"button" class"layui-btn layui-btn-blue2 layui-btn-sm" id"ExportExcel" onclick"ExportExcel()" value"导出" />JS //导出Excelfunction ExportExcel() {…