vue img 图片损坏时展示替图片

news2024/11/27 2:28:11

场景:图片地址找不到时,会展示如图一;虽然没什么大影响,但是有点丑,需求是想在图片损坏时展示替补图片,如图二。

 代码实现:给img标签加@error事件

<img :src="item.imageUrl" :alt="item.imageName" @error="e => {e.target.src = '你的替补图片地址'}">

 我的整体代码如下:

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

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

相关文章

android JSBridge的加载时机问题

https://github.com/lzyzsd/JsBridge 也算是比较悠久和使用了。 可供参考的android和IOS&#xff0c;以及前端的使用 https://segmentfault.com/a/1190000018208609 遇到的问题&#xff1a; 比如&#xff1a; 从前端在加载WebView的时候&#xff0c;执行了某些动作&#xff0c…

【Java/大数据】Kafka简介

Kafka简介 Kafka概念关键功能应用场景 Kafka的原理Kafka 的消息模型早期的队列模型发布-订阅模型Producer、Consumer、Broker、Topic、PartitionPartitionoffsetISR Consumer Groupleader选举Controller leaderPartition leader producer 的写入流程 多副本机制replicas的同步时…

介绍AI绘画课,让智能工具助力创作 释放无限想象力 助你成为绘画大师

演示地址&#xff1a; www.runruncode.com/portal/article/index/id/19458/cid/81.html 画画是一项有趣的活动&#xff0c;它让人充满无限可能。对许多人来说&#xff0c;画画既是一种放松的方式&#xff0c;也是一种与创意、文化和艺术联系的途径。如果你是一个初学者&#x…

《深度学习推荐系统》笔记

目录 一、推荐系统是什么1.作用和意义2.推荐系统的架构2.1 逻辑架构2.2 技术架构 二、传统的推荐系统方法1. 协同过滤算法1.1 userCF&&ItemCF1.3 矩阵分解算法 2. 逻辑回归算法3. 因子分解机3.1 POLY2模型3.2 FM模型3.3 FFM模型3.4 小结 4. 组合模型4.1 GBDTLR组合模型…

valle代码过程

github代码链接 https://github.com/lifeiteng/vall-e/tree/main1.PyTorch pytorch官网 https://pytorch.org/指令 conda install pytorch torchvision torchaudio pytorch-cuda11.8 -c pytorch -c nvidiapip install torchmetrics0.11.12.fbank pip install librosa0.8.1…

前端vue入门(纯代码)33_缓存路由组件

如果我一贫如洗&#xff0c;你将会是我最后一件行李。 【31.Vue Router--缓存路由组件】 背景&#xff1a;在Cartoon组件的input框&#xff0c;输入了一些数据的时候&#xff0c;但是&#xff0c;当我切换到Stars组件的时候&#xff0c;那么Cartoon组件就会被销毁&#xff0c…

易基因“多区域DNA甲基化检测探针设计及其检测方法”获专利授权!

大家好&#xff0c;这里是专注表观组学十余年领跑多组学科研服务的易基因。 DNA甲基化是表观遗传学研究中&#xff0c;修饰最为稳定&#xff0c;含量最为丰富&#xff0c;对基因调控最为活跃、途径最为广泛的一种修饰。不同基因区域或位点的修饰与胚胎发育、疾病发生和发展密切…

三层架构详解

什么是三层架构&#xff1f; 三层架构就是为了符合“高内聚&#xff0c;低耦合”思想&#xff0c;是一种十分完善的软件应用程序架构&#xff0c;它将应用程序组织成三个逻辑和物理计算层&#xff1a;表示层&#xff08;或用户界面&#xff09;、应用层&#xff08;负责处理数据…

Java中abstract关键字

文章目录 由来语法格式使用说明应用举例 由来 举例1&#xff1a; 随着继承层次中一个个新子类的定义&#xff0c;类变得越来越具体&#xff0c;而父类则更一般&#xff0c;更通用。类的设计应该保证父类和子类能够共享特征。有时将一个父类设计得非常抽象&#xff0c;以至于它…

数字赋能,你见过哪些科技感爆棚的VR数字展厅呢?

随着科技的不断进步&#xff0c;线上展厅作为一种新型的展示方式&#xff0c;在社会层面得到了广泛的认可和应用&#xff0c;VR数字展厅带给观众不一样的视觉震撼感&#xff0c;大大提升了品牌的价值。 传统的功能性展馆或是展厅千篇一律&#xff0c;缺乏品牌特色以及趣味性&am…

springboot之配置文件加载

springboot启动流程参考。Springboot总结。本内容主要解析里面的配置文件的加载过程。 springboot资源加载 入口。SpringApplication#run 我们知道&#xff0c;run方法是构建容器的过程。里面有一个方法&#xff1a;prepareEnvironment。用于构建环境组件Environment&#xf…

【ArcGIS Pro二次开发】(48):三调土地利用现状分类面积汇总统计

之前做了一个三调三大类面积统计&#xff0c;有小伙伴反映太粗糙&#xff0c;想要一个完整的地类面积汇总表。 【ArcGIS Pro二次开发】(35)&#xff1a;三调三大类面积统计 本质上并没有多少难度&#xff0c;之前也做过类似的用地用海汇总表&#xff0c;于是拿出来改一改就好了…

3D开发工具HOOPS 2023 SP2更新:增加了SOLIDWORKS贴花支持!

HOOPS SDK是全球领先开发商TechSoft 3D旗下的原生产品&#xff0c;专注于Web端、桌面端、移动端3D工程应用程序的开发。长期以来&#xff0c;HOOPS通过卓越的3D技术&#xff0c;帮助全球600多家知名客户推动3D软件创新&#xff0c;这些客户包括SolidWorks、SIEMENS、Oracle、Ar…

几款好用软件,嗐,朋友推荐的,真香

1、git加速 官网&#xff1a;https://steampp.net/ 2、gif 截图 官网&#xff1a;https://www.screentogif.com/

scss 预处理器自定义ui框架(bem架构)

BEM架构 bem架构 它是一种css架构 oocss 实现的一种 &#xff08;面向对象css&#xff09; &#xff0c;BEM实际上是block、element、modifier的缩写&#xff0c;分别为块层、元素层、修饰符层&#xff0c;element UI 也使用的是这种架构 BEM 命名约定的模式是&#xff1a; …

kaggle,球员接触检测

比赛链接 比赛目标 检测球员在NFL橄榄球比赛中所经历的外部接触。你将使用视频和球员跟踪数据来识别与接触的时刻&#xff0c;以帮助提高球员的安全。 评价指标 马修斯相关系数&#xff08;Matthews Correlation Coefficient&#xff0c;简称MCC&#xff09;是一种常用的二…

图论算法笔记

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 第12章 最短路径算法12-1 有权图的最短路径问题最短路径问题-路径规划单源最短路径带权图的最短路径和无权图的最短路径带权图的最短路径算法-Dijkstra算法 12-2 Di…

检测到目标Strict-Transport-Security响应头缺失

详细描述 Web 服务器对于 HTTP 请求的响应头中缺少 Strict-Transport-Security&#xff0c;这将导致浏览器提供的安全特性失效。 当 Web 服务器的 HTTP 头中包含 Strict-Transport-Security 头时&#xff0c;浏览器将持续使用 HTTPS 来访问 Web 站点&#xff0c;可以用来对抗协…

Echart柱形图条纹设置

代码内容: option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: bar},{data: [20, 40, 90, 40, 30, 70, 120],type: bar},{data: [140, 230, 120, 50, 30, 150, 120]…

利用远程调试获取Chromium内核浏览器Cookie

前言 本文将介绍不依靠DPAPI的方式获取Chromium内核浏览器Cookie 远程调试 首先我们以edge为例。edge浏览器是基于Chromium的&#xff0c;而Chromium是可以开启远程调试的&#xff0c;开启远程调试的官方文档如下&#xff1a; https://blog.chromium.org/2011/05/remote-deb…