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

最新推荐文章于 2024-04-15 14:56:17 发布
原创 最新推荐文章于 2024-04-15 14:56:17 发布 · 2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了一种处理网页中图片加载失败的方法，通过在img标签上绑定error事件并替换原有src地址为默认图片，确保页面展示的完整性和用户体验。

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

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

当vue在图片加载过程中报错时，采用默认图片作为显示结果
11-18
为了实现这一功能，我们可以通过以下步骤进行操作：首先，在Vue组件的`data`选项中定义一个变量来存储默认图片信息；其次，在HTML模板中通过绑定事件监听器的方式触发错误处理函数；最后，编写相应的JavaScript代码...
vue实现图片加载完成前的loading组件方法
08-28
在这个例子中，我们使用 onerror 事件来处理图片加载失败的情况，並將错误图片替换为默认图片。 知识点六：JS 代码实现 除了使用 Vue 组件外，我们还可以使用纯 JS 代码来实现图片加载前的 Loading 效果。在这个...
Vue 图片加载失败显示默认图片
最新发布
weixin_45128657的博客
04-15 1447
【代码】Vue 图片加载失败显示默认图片。
vue图片加载失败时用默认图片替换的方法
10-16
主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue自定义指令，图片加载不出来，使用默认图片的三种方法
weixin_50367873的博客
06-30 3419
一、常规解决方法 我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> 当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，
vue项目中图片加载不到时，使用默认图片替换
肖帅的博客
04-08 1207
vue项目中图片加载不到时，使用默认图片替换 解决方法： ①使用三目运算符 ②使用onerror <img :src="item.photo ? item.photo :''" alt="头像" class="photo" :onerror="defaultImg" /> co...
Vue项目，当图片加载错误时，用默认图片代替
weixin_38304202的博客
09-14 904
转自：http://blog.youkuaiyun.com/qq_32786873/article/details/70161342 使用require将图片进入，写法如下： [html] view plain copy data: () => ({       logo: 'this.src="' + require('../assets/im
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
`vue-lazyload`是一个专门针对Vue.js设计的图片懒加载插件，它的主要作用是在图片实际进入视口之前，不进行网络请求，而是先显示一个预设的占位符，等到图片即将进入用户的可视区域时，再进行加载。这样可以显著减少...
vue中当图片加载失败时触发事件，重新修改src地址或者删除此标签
a1783118的博客
04-25 597
vue中当图片加载失败时触发事件，重新修改src地址或者删除此标签
vue中当图片地址无效的时候，显示默认图片
小圣贤君的博客
01-25 9643
web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。 对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。 :src="item.img" @error="imgError(item)" /> 给图片添
数据可视化记二基础学习(Highcharts、AntV、ECharts)
堕落心的博客
09-15 3693
目录一、Highcharts1.1 Highcharts JS1.2 Highstock JS1.3 Highmaps JS二、AntV 一、Highcharts 1、Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 系列包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编
vue3上传图片组件+图片加载失败替换图片
qq_41820599的博客
08-08 1037
vue3上传图片组件。
VUE中(img)图片加载失败时(onerror)显示替换的图片
我的米饭
07-01 2724
需要使用img标签上的一个属性 onerror ，绑定一个本地图片地址，以下是VUE里的写法： HTML代码： <img alt="" :src="item.iconPath" :onerror="defaultImg" /> JS代码 export default { data () { return { defaultImg: 'this.src="' + require('@/assets/images/app_icon.png') + '"', } } } ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
weixin_39602579的博客
12-22 2590
最近遇到了个问题，用v-bind动态绑定img的src，图片加载不出来。控制台显示src是有获取到图片地址的，可是就是加载不出来。最后才发现原因原来是浏览器中直接显示'./img/img1.png'，也就是没有经过编译的步骤，直接将获取到的数据当作字符串显示。解决方法：1.在当前界面全局import图片地址//使用import引入import img1 from './img/img1.png'i...
图片加载失败显示默认图片
weixin_43837268的博客
04-26 1011
web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。 对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。 <img :src="item.img" @error="imgError(item)" /&...
vue组件内的一些图片，因为网络原因图片没加载到。
qq_38203646的博客
04-03 1187
在img标签上添加onerror="javascript:this.src='图片路径';onerror=null;"，可以在图片加载失败后使用备用的图片。onerror=null需要添加，不然如果备用图片也加载失败会陷入死循环。...
vue请求网络图片403错误，图片有占位但是显示不出来解决办法
zhangli0421的博客
10-29 473
在index.html 增加一个meta标签<meta name="referrer" content="no-referrer"
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值