vue当图片加载失败时，用一个默认图片替换；

「已注销」 「已注销」 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.1k累计阅读 2.1k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-03-13 16:38:52 发布 2.1k 阅读 AI 写同款· GEO 优化 ›
vue图片加载失败时用默认图片替换的方法 前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 方法如下 原理就是给img绑定error事件，替换原有的src地址。 首先在data中创建一个defaultImg（随便起的），里面的值是该默认图片的地址； 在html页面的img标签上绑定该属性 这样默认图片就设置好了； 这样做的好处就是可以提高用户体验，而图片的alt属性，是在图片显示失败后出现的文字，像下图所示，但是这样的用户体验不高； 像后台管理系统中，如果是这样或者是有一个默认封面的话，会感觉很舒服； 总结 以上就是这篇文章的全部内容 立即下载

原理就是给img绑定error事件，替换原有的src地址。

首先在data中创建一个defaultImg（随便起的），里面的值是该默认图片的地址；
在这里插入图片描述 在html页面的img标签上绑定该属性
在这里插入图片描述
这样默认图片就设置好了；

收录于
vue

当前文章被收录于：

vue
3 篇文章 0 人学习
订阅专栏 查看详情
标签
#vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
华为OD机试真题 Java&Go 实现【优雅子数组】【100%通过率】【2022.11 Q4 新题】 如果一个数组中出现次数最多的元素出现大于等于K次，被称为K -优雅数组，k也可以被称为优雅阈值。例如，数组1，2，3，1、2，3，1，它是一个3-优雅数组，因为元素1出现次数大于等于3次，数组1,2,3,1,2就不是一个3-优雅数组，因为其中出现次数最多的元素是1和2，只出现了2次。给定一个数组A和k，请求出A有多少子数组是k-优雅子数组。 阅读详情

相关推荐

【PVE9.1使用教程】

弹窗代码在 /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js 中，通过 void({…}) 可以让弹窗部分代码不执行，实现删除弹窗的效果。安装过程这里不再赘述，记得不要使用网络版本进行安装，安装的时候不要使用镜像，否则安装过程会很卡。把下面的配置添加进去，允许同一个网段下的所以主机访问/mnt/pve_share文件夹。可以自己搭建也可以去咸鱼购买，本人在咸鱼上面购买的，暂时可用。也可以使用下面的命令，版本号需要自己查看最新的版本号。

weixin_42950821的博客 960

vue自定义指令，图片加载不出来，使用默认图片的三种方法

一、常规解决方法 我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> 当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，

weixin_50367873的博客 3558

SolidWorks与Python二次开发实战：从宏录制到自动化脚本

本文详细介绍了利用Python对SolidWorks进行二次开发的实战方法。通过宏录制获取操作指令，再将其转换为Python脚本，工程师可以高效实现建模、出图等重复任务的自动化，显著提升设计效率。文章涵盖了环境搭建、代码转换、调试技巧及完整实战案例，为工程师提供了从入门到精通的完整路径。

weixin_29082143的博客 947

vue项目中图片加载不到时，使用默认图片替换

vue项目中图片加载不到时，使用默认图片替换 解决方法： ①使用三目运算符 ②使用onerror <img :src="item.photo ? item.photo :''" alt="头像" class="photo" :onerror="defaultImg" /> co...

肖帅的博客 1241

Colmap中 patchmatch源码

惊世骇俗的Colmap PatchMatch源码 500多行，简明易懂 先了解PatchMatch的options： max_image_size: 任一维度的最大图像尺寸 gpu_index： gpu的下标 depth_min，depth_max： 随机采样的深度范围 window_radius：用于计算NCC（两图片的归一化互相关），NCC的计算需要用到 win_size. 图像匹配 | NCC 归一化互相关损失 | 代码 + 讲解 - 知乎 (zhihu.com) window_step: 用.

qq_24884193的博客 2210

【Unity动画系统】详解Root Motion动画在Unity中的应用（一）

什么时候勾选Bake into pose，当不希望动画带动游戏对象旋转时。在旋转的动画中一般是不用勾选的，因为就需要用它来带动我们的角色对象旋转。但在比如前进、后退、待机等动画来说，我们就可以勾选这里，以避免因动画文件本身的瑕疵而给我们带来的旋转。loop match：代表了这个动画在角度上的吻合度。如果这个动画在播放中转角过大，那么就会显示红色，告诉我们如果勾选bake into pose，则会带来不好的效果。

weixin_60154963的博客 6805

html图片未找到替换,js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)...

在网站的前端页面设计中，要考虑到img图片资源的存在性，如果img的src图片资源不存在或显示不出来，则需要显示默认的图片。如何做到呢？一、监听document的error事件document.addEventListener("error", function (e) {var elem =e.target;if (elem.tagName.toLowerCase() === ‘img‘) {v...

weixin_36018494的博客 628

FPGA实现串口升级及MultiBoot（十)串口升级SPI FLASH实现

采用软核进行串口升级的原因主要有以下几点：1、官方推荐：官方以前也推出了针对逻辑进行升级的程序《XAPP1081_QuickBoot》，但是从今年起（2024年）官方就停止更新相关例程了（详见下面截图），所以采用官方推荐的软核更新；2、简单并具有通用性：针对SPI或者BPI官方都有相关的IP，可应对市场上80%以上的FLASH，并且官方IP通用性极强，只需要修改几个参数就可以对不同厂家的芯片进行升级操作；

OpenFPGA的博客 1998

HTML img src图片路径不存在，则显示一张默认图片的方法

我们一般会给图片设置alt属性，当图片路径不存在时可以显示提示文字。 <imgsrc=""alt="图片加载失败"> 如图所示： 但是这样很不好看，如果用在文章列表，我们可以给 img 标签设置一个onerror属性，可以在src路径不存在时显示指定的默认图片。 测试一下，我没有给src设置图片链接，代码如下： <imgsrc=""onerror="this.src='img/error.png'"/> 很明显，我们可以看出，当src属...

阅读之后，对你有帮助，那就点个赞再走吧 7116

人工智能技术基础系列之：迁移学习

作者：禅与计算机程序设计艺术 1.背景介绍 随着深度学习和神经网络的快速发展，越来越多的应用场景需要处理大量的数据和复杂的任务。然而，由于计算资源、存储空间等条件的限制，传统的人工智能方法往往不能满足实际需求。因此，为了提高效率和降低成本，研究人员提出了迁移学习的概念。本篇文章将详细介绍迁移学习的基

AI天才研究院 699

深入解析ZYNQ PL触发PS中断：从原理到创新实践

通过本文，您不仅学会了ZYNQ PL-PS中断的基础实现，更掌握了动态优先级调整中断负载均衡等创新技术。响应延迟降低40%以上系统吞吐量提升2-3倍功耗降低30%支持更复杂的实时应用硬件是身体的骨骼，软件是流动的血液，而中断则是连接二者的神经系统。只有精确控制每一条神经冲动，才能构建真正智能的嵌入式系统。拓展思考如何将AI决策引入中断调度？能否实现跨芯片中断同步？量子计算对中断架构的挑战？

QQ_778132974的博客 417

vue2 img加载失败时给默认图片

【代码】vue2 img加载失败时给默认图片。

浅影歌年的博客 317

SAP CPI 和 PO 的区别

SAP CPI适合云集成轻量级的集成需求，并且由于其云架构，具有快速部署低维护高度可扩展的特点。SAP PO更适合本地系统集成复杂的集成场景和高度定制化的需求，并且对于已经有 SAP 基础设施的企业来说，PO 提供了更多的控制和灵活性。选择使用哪个平台通常取决于企业的技术架构、集成需求、预算以及对灵活性和控制的需求。如果企业主要使用 SAP 的本地系统，并且有复杂的集成需求，那么 SAP PO 是一个理想的选择。如果企业更多地依赖云应用，并希望简化集成操作，那么 SAP CPI 更加适合。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 1873

vue2.0实现图片加载失败默认显示图片

<div class="bg"> <img :src="goods.phoneFloorAd.resUrl" :onerror="errorImg01"> </div> <script type="text/ecmascript-6"> export default { data () { ...

weixin_30641999的博客 192

efm32 入门.pdf

本PDF共计22页，介绍的是操作驱动API，下载与否自己斟酌。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

Vue实现图片loading

在网络慢的情况下请求图片用loading来替换空白屏。图片路径错误也也可以用另一张图来替换默认的破损图。

maohangfei.cn 1742

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

vue3 图片懒加载

懒加载

weixin_45795183的博客 407

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

v3图片懒加载

v3图片懒加载

weixin_68902642的博客 134

main.js中完成自定义指令全局注册

目标： 通过自定义指令的形式解决异常图片的处理，图片异常后提供一个默认图片注册自定义指令Vue . directive('指令名称' , {// 会在当前指令作用的dom元素 插入之后执行 // options 里面是指令的表达式 inserted : function(dom , options) {} })自定义指令可以采用统一的文件来管理 src/directives/index.js,这个文件负责管理所有的自定义指令首先定义第一个自定义指令 v-imagerror。

厚积薄发. 1140

vue自定义指令+onerror 解决图片显示报错问题

vue自定义指令+onerror 解决图片显示报错问题

Gik99的博客 899

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法

vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧方法如下原理就是给img绑定error事件，替换原有的src地址。首先在data中创建一个defaultImg(随便起的)，里面的值是该默认图片的地址；在html页面的img标签上绑定该属性这样默认图片就设置好了；这样做...

weixin_29369017的博客 1349

VUE：img标签加载图片失败时，显示一张自定义默认图片

关于img标签加载图片失败时，显示一张自定义的默认图片

干饭搬砖两不误。 2万+

图片加载失败替换图片解决方案

图片加载失败在不同浏览器表现有差异，比如google可能会一片空白、img的宽高是0*0，ie会在图片位置会出现一个碎片图标，火狐会显示一个边框像这样： 一个页面如果很多这种好难看，一般会用默认图片替换显示，解决方法： 1、css方案：不好使。在img的伪类加替换图片，但火狐的img没有伪类，google有，有时候就算给img标签加了width、height也没有，图片加载失败img的宽高...

fairyier 6781

vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等

<template> <d2-container> <h3>image加载失败使用默认图片</h3> <img src="" alt="test1.png" :onerror="errorImg" /> <hr> <h3>el-image懒加载、大图预览、加载占位、加载失败、</h3> <div class="demo-im.

zhouzuoluo的博客 6799

vue + 图片加载 + 默认图片

需求： 图片数据未返回 + 图片数据返回为空 + 图片加载出错 时，图片采用默认图片展示。 解决： 先判断返回数据是否有，再通过img 的 load事件判断是否加载完成。 现象： 图片会先加载默认图片，等到请求的图片加载完成替换默认图片。 注意： 代码中 1 至 2 处是必须使用 v-show，若使用 v-if ，其中一个图片无效时，DOM中img标签则会全部为默认图片的img标签。 ...

github_39598787的博客 2940

vue中img标签图片加载时与加载失败的处理方法

开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过vue去处理img标签过程中，图片加载时，与图片加载失败时的处理方法。 1.常见的一个图片的处理流程，当接收到图片时，若图片较大，或者网络较慢的情况，图片还未加载完成，此时需要显示一个正在加载中的图片提示用户图片正在加载中。当图片加载或读取完毕时我们才替换需要显示图片显示到标签上。主要用的是img标签中的onload方法进行处理,代码如下： <!DOCTYPE htm

qq_29328065的博客 8262

Vue请求网络图片或者接口图片为空、错误时，使用默认图片

VUE项目使用axios请求百度线上图片时，报403错误 这样状态的图片不处理，那么页面就会显得很难看，不太友好， 所以想到的解决方案是： 1.如果图片请求为空或者请求发生了错误，是不是可以使用默认图片替代了错误图片呢？ 这个方案当然是可行，那么开始解决吧… 1.1 首先我们需要知道，我们图片发生了错误了，我们怎么知道错误，然后触发错误事件，进行对错误图片的处理呢？ 很好，VUE为我们提供了@er...

hjx154954264的博客 3921
下一篇： vue结合element-ui做简单版todolist
点赞 0
评论 0
书签 书签 2
「已注销」
「已注销」
博客等级 码龄7年 4粉丝 27原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值