vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

最新推荐文章于 2024-03-11 17:32:02 发布
最新推荐文章于 2024-03-11 17:32:02 发布
阅读量2.6k 收藏 6
点赞数 3
分类专栏： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t6546545/article/details/88627171
版权

首先，来看下效果图（演示一下图片正常加载与加载失败时的效果）
效果图.gif
在线体验地址：https://hxkj.vip/demo/vueImgOnerror/

一、常规方法解决

我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。

例如这样使用：

<img src="images/logo.png" "javascript:this.src='images/logoError.png';">

当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。
但是，注意哦，这里有个大坑哦，如果logoError.png 也不存在

最低0.47元/天 解锁文章
前端小开发仔
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
图片懒加载的vue指令实现方式
qq_45752104的博客
06-28 250
图片懒加载在日常开发过程中经常会使用到，一般情况下的实现思路是先判断图片是否出现在页面内，然后替换图片的src属性从而控制图片的加载。这一思路比较简单，但是每次使用时都需要重复计算图片的距离页面高度，比较繁杂，这一次通过Vue的自定义指令实现图片懒加载，只需要在需要图片需要懒加载时将src改为对应的指令即可，使用非常方便。 具体使用方式： <img class="img" v-lazyload="imgSrc" alt=""> 此处主要应用的Vue的Vue.directive功能，实现了一个l
vue自定义指令（图片加载不出来，使用默认图片）
weixin_48802343的博客
03-24 429
官网解释全局自定义指令 v-什么的都是指令 应用场景：vue框架内置的指令系统无法满足我们业务需求 // 注册 Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) my-directive:这个是名称 第二个是个函
vue解决图片加载失败显示默认图片的方法
热门推荐
u010007013的博客
06-19 1万+
代码如下： defaultImg.js: function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th
vue 图片加载及报错解决
LuckyisLhh的博客
01-26 850
vue 图片加载
vue自定义指令之图片加载失败
sinat_36539161的博客
09-23 939
说到图片加载失败，我们都会想到这样处理 <img src="/img/covers.png" alt="封面" onerror="javascript:this.src='/img/default.png'"> 这样处理没问题，但如果放到项目中，几十上百个页面，一个一个加，就太重复了；而且还有个问题，如果图片很大，加载时间过长，也会严重影响用户体验，所以，这里需要同时解决两个问题： 1、在图片加载出来之前，给一个默认图片 2、图片加载失败，用默认图片来代替 回到代码层面，..
vue图片加载失败时用默认图片替换的方法
10-16
总结来说，Vue中处理图片加载失败的方法主要是通过绑定`error`事件并使用自定义方法来切换`src`。同时，结合`alt`属性，我们可以创建出一个既友好又健壮的图片展示方案。希望这个教程能帮助到正在学习或使用Vue的...
Vue自定义指令结合阿里云OSS优化图片的实现方法
10-16
主要介绍了Vue自定义指令结合阿里云OSS优化图片的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue自定义图片懒加载指令v-lazyload详解
08-30
懒加载是一种优化策略，用于提高网页性能，仅当图片进入浏览器的可视区域时才开始加载，而不是一次性加载所有图片。 首先，我们要理解`v-lazyload`的使用方式。在HTML中，我们可以像这样使用该指令： ```html ```...
VUE中(img)图片加载失败时(onerror)显示替换的图片
我的米饭
07-01 2426
需要使用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') + '"', } } } ...
css 实现鼠标移入图片显示遮罩层
悟世君子的博客
12-20 3092
css 实现鼠标移入图片显示遮罩层 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .image-div { width: 300px; height: 300px; position: relative; } .image-div i..
当图片加载失败时，做处理(onerror)(vue)
weixin_61285710的博客
12-17 1635
当图片加载失败时、或者加载中，做处理(onerror)(onload)(vue)，
Vue 图片加载错误处理（显示默认图片）
Yiu的博客
01-20 3310
在Vue H5项目中，图片加载错误，需要给图片一个默认的配图，如图： 如果不给默认图片的话会是这样，如图： 这样是不是很丑，哈哈哈哈！ 那么我们应该怎么处理呢？ 上码： <img :src="图片地址变量" alt="" @error="imgError(图片地址变量)"> imgError(图片地址变量){ 图片地址变量 = require(...
vue自定义指令 - v-real-img
nunumaymax的博客
08-02 396
注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片；在网络慢的时候，加载图片多的时候，可以达到占位图的效果；--
vue+element 图片加载失败处理方案--起死回生之术
weixin_44840212的博客
10-17 5388
el-image组件加载失败默认如下图：（这不是想要的结果，我想要真正加载成功的图！！！） 失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求！ el-image结构代码如下：（循环生成的多张图片，同样适用于单张图片，不过单张图片无需如此麻烦） <div v-for="(item, index) in imgList" :k...
vue中img标签图片加载失败加载另一张图片
m0_73162280的博客
06-26 726
当图片不存在时，将触发 onerror事件，而 onerror 中又为 img 指定一个图片。也就是说图片存在则显示logo.png，图片不存在将显示 error.png。
vue 图片路径问题 第一张图无法显示时用第二张图
weixin_41070391的博客
05-13 692
:src =绑定图片路径 :onerror 当图片碎裂时 我用这个属性加入一张替换图片 注意这个属性 有个缺点 ：如果第二张图片路径不存在时候，就会闪烁一直请求，所以必须保证有这张图片 ！ ...
Vue 图片加载失败显示默认图片
最新发布
qq_41985405的博客
03-11 989
【代码】Vue 图片加载失败显示默认图片。
css处理图片失效显示错误兜底图代码
qq_2511276124的博客
04-04 736
图片加载失败，添加错误css类,添加伪类填充错误图片和alt提示信息
vue图片img加载失败显示自定义默认图片(缺省图)
qq_39695210的博客
10-09 2877
vue图片img加载失败显示自定义默认图片(缺省图)
vue3自定义指令实现图片懒加载
08-19
在Vue3中，可以使用自定义指令和新的DOM监听技术来实现图片的懒加载。自定义指令是在Vue组件中对DOM元素进行操作的一种方式。通过自定义指令，我们可以监听元素是否在可视区域内，并在适当的时机加载图片。 引用中提到了使用Vue3的自定义指令和新的DOM监听技术来实现图片懒加载。具体步骤如下： 1. 首先，在Vue组件中注册自定义指令。可以使用`app.directive()`方法来注册指令，指令名称可以根据需要自定义。 2. 在指令的`bind`函数中，可以获取到指令所绑定的元素。可以使用`IntersectionObserver`实例来监听元素是否在可视区域内。 3. 在`IntersectionObserver`的回调函数中，可以根据元素的可见状态来决定是否加载图片。当元素进入可视区域时，可以将图片的`src`属性设置为真实的图片地址，触发图片加载。 4. 可以在`unbind`函数中取消对元素的监听。 需要注意的是，引用中提到的迷惑点是在数据懒加载的情况下，为什么还要对图片进行懒加载。这是因为当数据较多时，当图片的`src`属性被赋值为图片地址时，浏览器会再次发送请求去加载图片。因此，对图片进行懒加载可以延迟图片的加载，提高页面的性能。 总结起来，Vue3的自定义指令可以与新的DOM监听技术相结合，实现图片的懒加载效果，提高页面加载性能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3.0中用自定义指令实现图片懒加载](https://blog.csdn.net/m0_46846526/article/details/118916353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3使用自定义指令实现图片懒加载技术](https://blog.csdn.net/weixin_44786530/article/details/130771245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值