vue-lazyload本地、url 、背景图、循环时候 4种使用方法

小果熙

于 2023-09-12 19:11:00 发布

阅读量244

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_60974764/article/details/132838784

版权

1、本地需要使用require

v-lazy="require('@/assets/img/big.png')"

2、url路径

v-lazy="'https://beibei'"

3、背景图

<div v-lazy:background-image="require('@/assets/img/big.png')"></div>

4、循环

v-lazy="item.src"

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小果熙

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-lazyload本地、url 、背景图、循环时候 4种使用方法

1、本地需要使用require。
复制链接

扫一扫

前端性能优化之图片懒加载

qq_41595903的博客

06-20

690

1. 什么是图片懒加载？当访问一个网页的时候，优先显示可视区域内的图片而不是一次性加载所有的图片，但需要显示时再发送图片请求，避免网页打开时加载过多的资源。这样可以有利于前端性能优化，减轻服务器压力以及提升用户体验。 2.使用场景当一个页面需要一次性载入很多图片时，就需要使用的图片的懒加载 3.vue中使用vue-lazyload实现图片懒加载 1.安装插件使用npm: npm insta...

vue-cms（1）

from_shanghai的博客

07-24

789

2019.7.7——7.24 01 和 02没有关系 01的图片资源自己有要cnpm i，安装node_modules,然后npm run dev （接口要改 http://www.liulongbin.top:3000） day7\02.vms npm run dev:EADDRINUSE 3000端口被占用把新闻资讯改成路由创建newsl...

1 条评论您还未登录，请先登录后发表或查看评论

【vue】如何使用vue-lazyload实现图片懒加载

freeGameBox的博客

06-02

1407

vue-lazyload是一个简单易用的图片懒加载插件，它可以帮助我们提升网页性能和用户体验。它主要通过自定义指令v-lazy和IntersectionObserver API来实现懒加载的功能。我们只需要安装并引入插件，并在需要懒加载的元素上使用v-lazy指令即可。

JS读取本地文件夹和图片异步加载（图片LazyLoad）

04-13

NULL 博文链接：https://angrycoder.iteye.com/blog/1711155

Vue图片懒加载

weixin_62407339的博客

02-25

134

Vue图片懒加载

vue图片懒加载

zaoqinghuan的博客

11-15

1956

什么是图片懒加载，通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张设置好的图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。比如一个页面中有很多图片，如果一上来就发送这么多请求，页面加载就会很漫长。图片懒加载不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前。 ...

解决vue的 v-for 循环中图片加载路径问题

10-18

可以使用Vue的懒加载库如`vue-lazyload`。 3. **图片不存在**：确保后台返回的图片名称与实际存在的图片文件名一致。 4. **网络跨域**：如果图片资源不在同一个域下，可能存在跨域问题。可以使用`CORS`（跨源资源...

vue-app项目知识点总结（二）

青椒的博客

05-23

1407

一. FeatureView 独立组件封装FeatureView div>a>img 二. TabControl 独立组件的封装 props -> titles div>根据titles v-for遍历 div -> span{{title}} css相关选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom current...

Vue

H先生

04-25

466

一. Vue 1.1. 官方文档 vue官网 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目 4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术 5). vue包含一系列的扩展插件(库): * vue-cli: vue脚手

Vue2.0实战

qq_42636335的博客

03-06

6758

目录项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..

vue设置background image之后，本地有效，线上看不到图片

youyudexiaowangzi的专栏

05-13

1834

设置背景图本来在css中使用background属性十分简单，但是vue项目经过编译之后图片的url会改变，然后和项目的根地址结合，可能产生出一个不存在的url，导致加载背景图失败原： .invitationBoard{ width: 3.45rem; height: 1.18rem; background:url('../../../static/images/headBg.png') no-repeat; background-size: 100% 100%; } 为了让url不至于出

VUE项目中使用VueLazyLoad实现图片懒加载（动态背景图）

littleOneYuan的博客

09-27

1368

文章目录目标方法插件安装/模块引入图片懒加载目标列表每行弹框背景图定制化显示方法将所有图片以行id命名放在相对路径文件夹中用插件实现图片懒加载在打开弹框的时候改变图片路径变量的值插件安装/模块引入在项目中安装插件vue-lazyload npm install vue-lazyload --save 在main.js中引入 import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./

Vue项目中实现图片懒加载

毛毛虫博客

05-07

3万+

此文章已永久迁移至个人博客网站，为不影响使用，请打开如下网址访问 https://www.iiter.cn/blogs/28

【vue】vue2与vue3实现图片懒加载

热门推荐

halo1416的博客

07-31

4万+

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ----vue-lazyload。 1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦） 2. main.js 中全局引入： import VueLazyLoad from 'vu...

VUE设置本地背景图片

stuild stuil 的博客

04-05

8659

有个小需求，原本图片是网络的直接通过这种方式就能调到如下 min-height: 100vh; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(http://codegen.caihongy.cn/20201223/fa6532cc6f564976872

vue引入图片路径的三种主要方法

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

03-16

2万+

1、在js代码里面或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/

vue-lazyload v-lazy本地、url 、背景、循环时候 4种使用方法

q915730058的博客

05-25

1103

【代码】vue-lazyload v-lazy本地、url 、背景、循环时候 4种使用方法。

vue 图片的懒加载

sq-20184的博客

05-03

526

面试的时候一直被问懒加载，预加载的问题，回答的比较含糊。利用假期做了个vue 的懒加载，具体如下。首先你的安装 npm install vue-lazyload --save-dev 或者yarn add vue-lazyload --save-dev 然后在main.js 里面引入 main.js import Vue from 'vue' import App from './App....

vue-lazyload使用方法

06-01

下面是使用 `vue-lazyload` 的方法： 1. 安装 `vue-lazyload` 使用 npm 命令安装 `vue-lazyload`： ```bash npm install vue-lazyload --save ``` 2. 引入 `vue-lazyload` 插件在 Vue 项目中的 `main.js` 文件...