vue-lazyloading实现图片懒加载时图片引入路径问题

最新推荐文章于 2024-08-19 10:26:50 发布
原创 最新推荐文章于 2024-08-19 10:26:50 发布 · 898 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决Vue项目中main.js引入图片的问题，特别是在使用v-lazyload实现图片懒加载时，引入assets目录下图片的方法。介绍了require('图片路径')的正确用法及原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文档地址(https://www.npmjs.com/package/vue-lazyload)

关于vue中main.js引入图片的问题

刚接触vue的项目，很多东西需要学习
在使用v-lazyload实现图片懒加载的时候，在main.js中引入图片地址的时候出现了问题
我发现如果引入的路径是根目录下的 /static中的图片，没有任何问题，但是如果引入的是assets目录下的图片就找不到图片
后来去网上查了一下才知道，原来是main.js中的图片除了/static目录外都需要通过reqiure(‘图片路径’)的方式进行加载
通过reqiure(‘图片路径’)的方式引入的原因是因为打包之后会将图片转成base64格式打包进入js文件中

  • 综上，vue中在js文件中引入外部文件都需要通过import获取require进行引入
【Vue插件】vue-lazyload 实现图片懒加载
qq_43186285的博客
03-02 276
安装 npm install vue-lazyload --save -dev 在入口文件main.js 中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyload) 或者添加自定义选项 Vue.use(VueLazyload, { preload: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) .
「VUE架构」VUE2.0 图片懒加载vue-lazyload
拥抱AI Design
06-12 2253
本文主要介绍图片懒加载vue-lazyload的使用 1.第一步，安装vue-lazyload 打开package.json，找到dependencies如下： "dependencies": { "vue-lazyload": "^1.2.4" }, 安装并重启服务 npm install npm run dev 2.第二步，引入vue-lazyload并调用 ......
vue项目——vue-cli3中使用VueLazyload图片懒加载的路径问题
qq_40556950的博客
12-30 2128
一、提出问题： 使用最新的脚手架vue-cli3构建项目的时候发现，对图片懒加载插件的使用按照老方法不成功。故而进行多方搜索尝试最后成功了。 二、解决问题：步骤如下… … 2.1 安装插件： npm install vue-lazyload --save-dev 2.2 vue-cli2中main.js中引入： import VueLazyload from 'vue-lazyload' Vu...
vue-lazyload遇到的坑(本地图片路径问题）
qq_43643806的博客
04-12 3074
本地图片路径问题
图片懒加载使用方法及感受
夏尔的小酒馆
01-11 4065
对前端而言，提高网页的加载速度非常重要。众所周知，图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面用到的图片即可，其他的图片资源可以稍后再加载。有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件，在用户触发某个条件之后再加载对应的图片资源，这对网站的打开速度有很大提升。 插件的使用方法很简单（依赖jquery）：引入lazyload.js（压缩版才4KB）
Vue 图片懒加载 v-lazy
qq_40809206的博客
07-25 1751
图片懒加载v-lazy
vue图片懒加载插件vue-lazyload
thatway的博客
02-27 381
插件地址：https://github.com/hilongjw/vue-lazyload demo：http://hilongjw.github.io/vue-lazyload/ 1、安装 cnpm i vue-lazyload -S 2、使用 main.js import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazy...
vue-lazy(自定义图片懒加载)
最新发布
Kylincsg的博客
08-19 1229
在npm官网库中试了好多，要么就是不生效没什么用的，要么就是没文档不知道能不能用的，上次在npm找了一个，现在找不到了，被删库了，所以，还是自己简单写一个救救急吧，废话不多说，直接看代码!!!
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
08-29
`vue-lazyload`插件是专门为Vue.js设计的图片懒加载解决方案，它提供了丰富的配置选项和良好的性能。首先，要安装此插件，你可以通过npm命令行工具进行安装： ```bash npm install vue-lazyload --save ``` 或者...
浅谈vue-lazyload实现的详细过程
01-19
本文介绍了浅谈vue-lazyload实现的详细过程，分享给大家，也给自己留个笔记 首先 ,在命令行输入npm install vue-lazyload&&cnpm install vue-lazyload 然后,在main.js里引入这个模块。 import 'VueLazyload' from ...
Vue img图片的路径问题
phhz的博客
07-26 334
v-lazy的路径使用require才能成功。。。 main.js里也是用require才行
vue v-lazy无法加载图片
6块腹肌的博客
11-26 3518
1、如果是无法正确加载图片，可以通过调整下图的位置 先use，然后再引入，不知道什么原因，反正这样就可以解决问题。 2、如果是无法加载占位图，可以换一个写法，如上图，使用require引入，我一开始直接使用路径引入也是不可以。网上还有说可以通过在static文件夹引入的话，就可以直接使用路径的形式。 ...
vue插件vue-lazyload懒加载插件的使用及在过程中遇到的图片不更新问题
weixin_30478757的博客
05-31 326
当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 1. 安装插件： npm install vue-lazyload --save-dev 2. main.js引入插件： import VueLazyload from 'vue-lazyload' //引入这个懒加载插件 　Vue.us...
vue-lazuload 的使用
yuange
02-17 254
1 安装 npm i vue-lazyload 引入 import Vue from 'vue'; import vueLazyload from 'vue-lazyload'; Vue.use(vueLazyload,{ // 加载错误时显示的图片 error: require('./image/fail.jpg'), // 正在加载的时候显示的图片 loadi...
Vue + elementUI使用中总结，包括踩坑（更新中）
是日前端
11-11 2780
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
图片懒加载之lazyload.js插件使用
diaobang0776的博客
01-12 179
简介 lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。 使用 lazyload依赖与jquery。所以先引入jquery和lazyload <script src="jquery.js"></script> <script src="jquery.lazyload.js">&...
vant 引用Lazyload报错Lazyload
impossible1994727的博客
03-07 1809
报错如上图： 将本地代码添加如下两行就可以了： import Vue from "vue"; Vue.use(Lazyload); 完整使用方式如下： <template> <div class="Index"> <!-- banner --> <div class="banner"> <van-swipe :autoplay="3000" indicator-color="#ea792d" class="..
vue-lazyload使用图片路径的坑！！
runOnWay的博客
01-13 8246
使用vue-cli脚手架快速生成的框架中， src**同级目录**中有static文件夹 src**子文件夹**中有assets文件夹 在使用vue-lazyload，设置error或loading属性的图片路径时， 图片在assets文件夹，就需要使用require（）进行引入。 Vue.use(VueLazyload, { preLoad: 1.3, loading:
vue-lazyload使用相对图片路径无法正常加载的问题
studentenglish的博客
08-19 2356
在项目中引入vue-lazyload实现图片懒加载功能， 如果使用在线图片路径则加载成功，本地路径的图片的话加载异常，如下： 原因： vue-lazyload是在main.js文件中引入，不会被webpack进行编译，src中的文件会被webpack编译，包括assets，assets文件夹中的图片地址，会在编译过程中改变。因此vue-lazyload无法正确获得图片地址，就不能显示图片了。 解...
Vue图片懒加载插件Vue-Lazyload更新支持Vue2.0
结合Vue.js自身对组件化、响应式数据管理的优秀处理，Vue-Lazyload不仅能够帮助开发者轻松实现图片的懒加载，还能够在不影响用户界面和交互的前提下，优化性能和用户体验。这使得Vue-Lazyload成为了Vue.js开发者工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值