使用vue-lazyload 加载图片遇到的坑

最新推荐文章于 2022-06-25 19:33:07 发布
最新推荐文章于 2022-06-25 19:33:07 发布
阅读量601 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/adong69/p/9455434.html
版权

我在使用  vue-lazyload的时候，安装目录的位置，配置loading的图片位置

在main.js 里配置

Vue.use(VueLazyload, {
　　loading：“”
}

我试过的方法：

　　　　./assets/loading.gif
　　　　/assets/loading.gif
　　　　assets/loading.gif
　　　　@/assets/loading.gif
全部都是失败：
 
正确的写法有两种：
第一种：你的图片在assets里面：
　　loading: require('./assets/loading.gif'),
第二种：你的图片在static里面　　
　　loading: '../static/loading.gif'    //就是我们平时所写的路径
 
 

转载于:https://www.cnblogs.com/adong69/p/9455434.html

dbeml82080
关注
vant3中vant-image使用lazy-load报错：Uncaught(in promise)TypeError Cannot read property ‘deep‘ of undefined
cabinx的博客
08-30 1705
关于vant3中vant-image使用lazy-load报错：Uncaught (in promise) TypeError: Cannot read property ‘deep’ of undefined解决方案 问题描述: vant3中vant-image使用lazy-load出现以下报错： Uncaught (in promise) TypeError: Cannot read property 'deep' of undefined 解决方案: 上述问题的原因在于：vant
使用vue-lazyloader实现图片的懒加载
weixin_45664402的博客
03-15 439
使用vue-lazyloader实现图片的懒加载 引言： 在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 懒加载 技术简介： 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。 图片的懒加载 通俗的来讲，图片的懒加载：图片需要显示在屏幕上时，再进
vue-lazyload加载图片第二屏一直显示默认图片
weixin_45115895的博客
04-28 764
vue-lazyload加载图片第二屏一直显示默认图片 最近的一个项目有用到图片懒加载,遇到一个问题困扰了我好几天,最后找到原因,顿时觉得自己好蠢 问题描述:进入页面首屏自动加载后,往上拉时并没有继续渲染图片,一直显示默认图片,给我纳闷好久 昨天在又一次探究无果的情况下本来打算另辟蹊径,投机取巧,强制刷新页面的时候发现懒加载效果在鼠标滚轮滚动的情形下是可以实现正常的懒加载的效果的,这样的话绝对是...
vue-lazyload 插件使用((图片懒加载)
lwx931449660的博客
02-26 1006
1，安装 // 安装 npm install vue-lazyload --save 2，注册 // 注册 main.js全局注册 import Vue from 'vue' import vueLazyload from 'vue-lazyload' Vue.use(vueLazyload); 在注册的时候是可以传入配置参数的，常规配置如下 Vue.use(VueLa...
移动端图片滚动加载-lazyload实现的要点总结
weixin_34162401的博客
12-25 238
最近在做移动端的营销页面时，遇到了页面有大量图片的情况，于是很自然的想到了要使用图片lazyload，PC端用着jQuery，也有现成的插件。但是在移动端，基本不用jQuery，于是就试着自己去造一下轮子。实现lazyload并不难，我很快就想到以下几个步骤： 首先HTML中不直接写图片真实URL，而是用一个空图代替，如<img class="lazy" src="images/nop...
vue补充
qq_37820215的博客
06-29 151
该项目是一个购物商城的移动 app，采用 VUE 框架构建单页面应用，实现购物商店的基本操作，如浏览商品种类及商品的 详细信息等功能。  使用 vue 框架，vue-router 搭建项目路由，vuex 实现各组件数据的共享。  根据业务逻辑，划分组件，结合 vue 第三方插件(Swiper插件)，ES6 语法、HTML5、CSS3 完成页面设计及布局实现。  采用组件化思想搭建项目，增加代码的复用性，从而提高开发效率，合理使用钩子函数，实现数据的监听。  通过 better-scroll、vue-
vue-lazyload使用总结(推荐)
10-17
总的来说，Vue-Lazyload是Vue项目中一个强大且灵活的图片懒加载解决方案，虽然存在一些使用陷阱，但通过深入理解其工作原理和注意事项，开发者可以有效避免这些问题，提高项目的性能和用户体验。
Vue-Lazyload:一个 Vue.js 插件，用于在您的应用程序中延迟加载您的图像或组件-开源
08-08
您可以通过传入一组侦听器名称来配置您想要 vue-lazyload 的事件。 如果您在发生某些动画和转换时遇到此插件重置自身加载的问题，这将非常有用。 使用 Intersection Observer 来提高大量节点的性能。 如果仅提供...
vue-lazyload懒加载插件介绍和应用
liuxin_1991的博客
02-25 1115
当前窗口看到的内容是有限的，当滚动到相应位置时加载其余内容插件vue-lazyload：https://github.com/hilongjw/vue-lazyload安装后main.js中import VueLazyLoad from ‘vue-lazyload’Vue.use(VueLazyLoad, {loading:require(‘common/image/default.png’)})...
vue组件懒加载 ajax,前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）
weixin_42438750的博客
08-05 1162
---恢复内容开始---使用组件懒加载的原因我们先来看看这样的一个页面，页面由大量模块组成，所有模块是同时进行加载，模块中图片内容较多，每个模块的依赖资源较多(包括js文件、接口文件、css文件等)所以我们在加载这样的页面会非常的慢解决思路——加载优先级在完成了组件化的拆分，确保模块之间不会互相影响和产生耦合之后，我们可以方面地调整加载策略。加载的策略是根据可见性来处理优先级问题。优先加载首屏可见...
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
在vue中使用图片懒加载详细指南，分享给大家。具体如下： 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo： 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
vue-lazyload使用图片路径的坑！！
runOnWay的博客
01-13 8192
使用vue-cli脚手架快速生成的框架中， src**同级目录**中有static文件夹 src**子文件夹**中有assets文件夹 在使用vue-lazyload，设置error或loading属性的图片路径时， 图片在assets文件夹，就需要使用require（）进行引入。 Vue.use(VueLazyload, { preLoad: 1.3, loading:
vue项目里使用vantUI框架使用轮播组件和懒加载出现元素跳动的问题
热门推荐
milli236的博客
07-16 1万+
移动端开发过程发现：1.懒加载我局部使用报错。只好全局引入，也方便以后其他页面的使用main.js// or with options (options 为可选参数，无则不传) import { Lazyload } from 'vant';  Vue.use(Lazyload, { preLoad: 0, error: 'static/img/error.jpg', loading:...
vue使用vue-lazyload图片懒加载并且设置loading大小
u012500054的博客
06-03 6997
npm install vue-lazyload --save import { VueLazyload } from 'vue-lazyload' vue.use(VueLazyload, { preLoad: 1.3, attempt: 2, error: require('../img/icons/error.png'), loading: require('../img/icons/loading.png') // 注意路径使用require（我这里使用相对路径） }) // img使用v
在vue.js路上遇到的小坑 ----------------------v-lazy加载图片失败 不显示默认图片
若如流水 淡淡流过
08-03 1万+
我相信很多初学者跟我一样在vue的路上一波三折吧！从安装到打包 处处都是小坑 首先 我们 cnpm  vue-lazyload --save后在main.js里引入 import VueLazyLoad from 'vue-lazyload'//加载后台图片 Vue.use(VueLazyLoad,{  error:引入图片的路径,    loading:l引入图片的路径， }) 在此你...
vant展示组件之Lazyload 懒加载
老君的博客
09-26 2560
版本号： vue/cli：4.5.12 vant：^3.0.10 使用方式： // 在main.js文件中 import { createApp } from 'vue' import { Lazyload } from 'vant' import default from '@/assets/images/default.png' // 注册 createApp(App).use(Lazyload, { lazyComponent: true, attempt: 3,
vue v-lazy无法加载图片
6块腹肌的博客
11-26 3324
1、如果是无法正确加载图片，可以通过调整下图的位置 先use，然后再引入，不知道什么原因，反正这样就可以解决问题。 2、如果是无法加载占位图，可以换一个写法，如上图，使用require引入，我一开始直接使用路径引入也是不可以。网上还有说可以通过在static文件夹引入的话，就可以直接使用路径的形式。 ...
使用vue-lazyload懒加载报错
FifthMonsignor的博客
06-25 1937
使用vue-lazyload懒加载报错
vue1.0 lazyload
最新发布
06-06
Vue 1.0 中没有官方提供的 `lazyload` 功能，你可以使用第三方库来实现。下面是一个基于 `vue-lazyload` 库的例子： 1. 安装 `vue-lazyload`： ``` npm install vue-lazyload@1.0.0 ``` 2. 在 `main.js` 中引入并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值