vue 图片加载失败插件VueLazyload

最新推荐文章于 2024-02-02 06:58:59 发布
最新推荐文章于 2024-02-02 06:58:59 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 
 

三步搞定：
 

import VueLazyload from 'vue-lazyload' //图片加载
 

Vue.use(VueLazyload,{
  error:require('@/assets/images/tu-bg.png'),
  loading:require('@/assets/images/loading.gif'),
});
 

 

<img v-lazy="banner" alt="">

                

        

        

    




    

      

        

            

              
                
                  Mr航
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue-lazyload图片延迟加载插件的实例讲解

				
			

			

				

					11-30
				

			

		

		

			
				
Vue-Lazyload 是一个专为 Vue.js 设计的图片懒加载插件，它可以有效地提升网页性能，减少首次加载时的流量，尤其是在图片较多的场景下。  1. **安装 Vue-Lazyload 插件**  安装 Vue-Lazyload 非常简单，你可以通过 ...

			
		

	



                

              
                



	

		

			

				
					
vue实现图片懒加载的方法分析

				
			

			

				

					11-21
				

			

		

		

			
				
在 Vue 中实现图片懒加载，我们可以借助 Vue Lazyload 这个插件。首先，需要通过 npm 安装该插件：  ```bash npm install vue-lazyload --save-dev ```  接着，在你的 `main.js` 文件中引入并使用该插件：  ```...

			
		

	



                


  
              

                


	

		

			

				
					
vue图片加载失败时用默认图片替换的方法

				
			

			

				

					10-16
				

			

		

		

			
				
主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

			
		

	





	

		

			

				
					
Vue中图片图片加载失败性能优化

				
			

			

				

					qq_53114797的博客
				

				

					01-30
					
					258
					
				

			

		

		

			
				
场景：基本上我们项目中的图片都是通过后台传过来我们再渲染到dom上面，但是app一旦上线之后呢，如果后台报错，我们接收不到图片，就会对用户有不好的体验感。

			
		

	



		

			
		



	

		

			

				
					
Vue 图片加载失败处理

					
最新发布

				
			

			

				

					weixin_42889176的博客
				

				

					02-02
					
					895
					
				

			

		

		

			
				
很多人会使用@error方法在图片加载的方式但是这种方式在默认图片加载失败时，，所以我使用了的方式

			
		

	





	

		

			

				
					
vue 动态加载本地图片失败

				
			

			

				

					w710537643的博客
				

				

					06-03
					
					397
					
				

			

		

		

			
				
使用require()内部只能传输静态字符串。这样是对的，如果传输一个变量则是错的。

			
		

	





	

		

			

				
					
vue加载图片失败处理

				
			

			

				

					weixin_43952807的博客
				

				

					04-25
					
					1815
					
				

			

		

		

			
				
<img :src="item.info.headimgurl" alt="" @error="errorImg()">
data：otherimg:'图片地址',
methods：errorImg(){
					let img = event.srcElement;
					img.src = this.otherimg;
					img.onerror = null; //防止闪图
				}

vue中的图片错误方法 在此备用

...

			
		

	





	

		

			

				
					
浅谈vue中使用图片懒加载vue-lazyload插件详细指南

				
			

			

				

					11-27
				

			

		

		

			
				
`vue-lazyload`是一个专门针对Vue.js设计的图片懒加载插件，它的主要作用是在图片实际进入视口之前，不进行网络请求，而是先显示一个预设的占位符，等到图片即将进入用户的可视区域时，再进行加载。这样可以显著减少...

			
		

	





	

		

			

				
					
Vue 中的 img 标签静态图片加载失败

				
			

			

				

					m0_61069739的博客
				

				

					10-17
					
					1539
					
				

			

		

		

			
				
在 Vue 中使用静态图片时，图片加载失败的原因是在项目编译后 img 标签根据 src 的路径寻找不到指定的资源，举个例子，在 src/assets 文件夹下放一张图片 “Yunjin.png”，在打包后图片名变成了 “Yunjin-xxxxx.png”，而 img 标签中的 src 路径还是原来的名字。在 webpack 环境下可以使用 require() 方法，但是到了 vite 环境下 require() 方法就用不了了，不过还是有其它方法可以用的——import.meta.url。

			
		

	





	

		

			

				
					
Vue图片加载失败处理方法

				
			

			

				

					weixin_43194434的博客
				

				

					10-16
					
					3583
					
				

			

		

		

			
				
Vue项目中 img 加载失败
场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片
// page 代码
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
 ...

			
		

	





	

		

			

				
					
【Vue】关于开发中本地图片加载失败的经验总结

				
			

			

				

					NineWaited的博客
				

				

					06-07
					
					8695
					
				

			

		

		

			
				
关于vue网页的开发过程遇到本地图片加载失败的解决方法

			
		

	





	

		

			

				
					
vue图片加载失败 空白页的解决方案@error函数

				
			

			

				

					肥晨开发的学习之路
				

				

					02-16
					
					2231
					
				

			

		

		

			
				
img标签中有一个onerror事件。是当引用的src属性获取不到图片，或者网络错误导致无法正常显示src属性的图片时，显示的提示错误图片或者是可以代替的万能图片。vue项目中 img标签加载失败(404)方法，@error事件。@error就是onerror。也可以用于项目中空白页的研发。

			
		

	





	

		

			

				
					
vue中加载图片失败显示默认图片

				
			

			

				

					xhwy_zh的博客
				

				

					07-03
					
					1201
					
				

			

		

		

			
				
vue中加载图片失败显示默认图片 亲测有效 别找别的了都是坑要么死循环要么就是一直执行error


<img :src="logoSrc"  @error="defaultImgs()"> 
//亲测有效


...

			
		

	





	

		

			

				
					
vue里img图片路径加载失败原因

				
			

			

				

					qq_52315656的博客
				

				

					04-03
					
					1789
					
				

			

		

		

			
				
也就是将img:require('../../assets/img/img.jpg')改为img：img.jpg就可以了。需要注意的，此时的../../assets/img/是路径名的前缀，而此时的img路径应该只是图片名字，就是直接将img设计为：img:require('../../assets/img/img.jpg')原因是直接放入的路径img:'../../assets/img/img.jpg'无法直接解析；

			
		

	





	

		

			

				
					
vue-lazyload 使用 failed to resolve directive: lazy

				
			

			

				

					woxingliu2018的博客
				

				

					10-13
					
					1134
					
				

			

		

		

			
				
vue2项目图片懒加载插件vue-lazyload报错

			
		

	





	

		

			

				
					
vue 图片加载及报错解决

				
			

			

				

					LuckyisLhh的博客
				

				

					01-26
					
					887
					
				

			

		

		

			
				
vue 图片加载

			
		

	





	

		

			

				
					
vue-lazyLoad遇到的一些问题

				
			

			

				

					baidu_41601048的博客
				

				

					10-26
					
					2508
					
				

			

		

		

			
				
Vue.use(VueLazyLoad,{

preLoad:1,

error:'./static/error.png',

loading:‘./static/img/a.jpg’

})

1 图片高度设置问题：

如果直接使用，没有设置任何参数。你可能会遇到图片无法展示的问题。你可以试着给图片设置一个高度。然后就会出现惊喜。

2 loading 图片如何设置大小？

如果你想在图片未加载...

			
		

	





	

		

			

				
					
vue设置懒加载图片出错时的替代图片跟loading时的图片 lazyload

				
			

			

				

					阿门阿窗一颗葡萄树
				

				

					11-12
					
					384
					
				

			

		

		

			
				
在main.js引入的时候设置


import imgError from "./assets/imgs/noimg.png";
import imgLoading from "./assets/imgs/loading.gif";

Vue.use(Lazyload, {
    preLoad: 1.3, //距离当前dom距离页面底部的高度 
    error: imgError, // 图片加载异常时，注意开发过程中如果图片放置在assets目录下，图片资源需要使用require()的方式路径引

			
		

	





	

		

			

				
					
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案

				
			

			

				

					u012443286的博客
				

				

					05-15
					
					4851
					
				

			

		

		

			
				
 对于vue项目而言，图片懒加载是一个常见的图片加载方案，可以优化用户体验，而vue-lazyload则是一个广泛使用的插件。
 对于某些业务场景，我们需要监听图片加载失败事件，而后进行相应的处理，然而无论是官方文档还是网络上的解决方案都不直观甚至有错误，开发者不经过一番探索，很难知道如何处理，甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索，所幸的是，发现该问题终究是能够解决的，现将相关解决方案分享如下。
业务场景
试想这样的场景：

在img标签上，使用v-lazy绑定的图片的地址。图片的地址可能

			
		

	





	

		

			

				
					
vue3图片懒加载 插件

				
			

			

				

					04-04
				

			

		

		

			
				
可以使用vue-lazyload插件来实现图片懒加载。  安装：  ``` npm install vue-lazyload --save ```  使用：  main.js中引入：  ```javascript import Vue from 'vue' import App from './App.vue' import VueLazyload...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值