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

最新推荐文章于 2024-05-14 16:54:15 发布
最新推荐文章于 2024-05-14 16:54:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： Vue学习 文章标签： vue v-lazyload 图片路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuefeng11111/article/details/86292129
版权
本文详细介绍了在Vue项目中使用v-lazyload实现图片懒加载的过程。重点讲解了在main.js中正确引入不同目录下图片的方法，特别是如何通过require加载assets目录下的图片，以及其背后的工作原理。
摘要由CSDN通过智能技术生成

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

  • 综上，vue中在js文件中引入外部文件都需要通过import获取require进行引入
明天又会在哪里
关注
专栏目录
浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程
05-18 1429
前序 承接上一遍“通过webpack构建vue项目”构建的项目文件，简单阐述一下当我们构建完成后，vue项目中的index.html、main.js、App.vue、index.js的运行加载过程，以及首界面是如何出现的，逐步了解vue项目，针对刚开始接触vue，不知道vue项目如何加载的小白，大神请绕过。 简介 项目部署完成后的项目结构以及解释如下图所示 项目运行 项目的运行入口index.html 为什么index.html是项目的入口以及为什么index.html加载后会继续加载main..
vue,在js中引入图片
weixin_43163518的博客
05-27 713
需要用require引入
js中引入图片的方式
g_blue_wind的博客
01-12 8601
$(document).ready(function(){         var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";     var shortenedUrl = window.document.location.href.replace(bas
vue中图片引入与使用几种方式
最新发布
木昆灵寒酥的博客
05-14 1363
将编写代码时定义的路径转换为编译打包后的路径。
mpvue main.js引入css,mpvue 目录详解及mpvue踩坑系列
weixin_30193461的博客
08-04 410
文件目录app.json.postcssrc.js 和 postcss.config.js样式转化问题：rem转rpxpages其中每一个页面对应一个文件夹main.jsmain.jsonindex.vue1、不要出现header,section,footer等标签，全部改成div2、{{}}动态数据绑定由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。凡是涉...
Vue的main.js中引入echarts后报 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
weixin_48826306的博客
04-19 1028
Vue的main.js中引入echarts后报 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’ 解决办法： 1、5.0以下的版本跟5.0以上的版本引入方法不一样 5.0以上可以通过： import * as echarts from 'echarts'; // 或 const echarts = require('echarts'); 重新安装试试 2、降低版本为4点几的，通过cnpm install echar
vue3中main.js引入图片的问题
03-30
在Vue3中，可以使用`import`语句引入图片，然后在模板中使用`<img>`标签来显示图片。以下是一个示例： 1. 在`src/assets`目录下创建一个名为`logo.png`的图片文件。 2. 在`main.js`文件中使用`import`语句引入该...
vue中使用vue-print.js实现多页打印
10-15
在main.js中，需要引入新创建的Print.js插件，并使用Vue.use()方法来注册插件。这样一来，就可以在Vue组件中使用this.$print方法进行打印了。 在Vue组件中，需要定义一个打印区域，通常会用一个元素包裹需要打印的...
vue+mock.js实现前后端分离
10-16
当后端接口开发完毕，只需取消在 `main.js` 中对 `mock.js` 的引入，即可切换到真实后端服务。 此外，Mock.js 提供丰富的数据生成规则，可以模拟各种类型的响应数据，如字符串、数字、日期、图片等，满足不同场景的...
关于vue中的图片问题
为何这么帅
02-24 564
1. 使用 require data() { return { imgUrl:require('../../assets/pc_img/xxx.png'), } },
vue2和3图片懒加载
qq_43978573的博客
05-20 176
1, 安装图片懒加载模块2, 在main.js入口文件中引入图片懒加载模块3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。
vue全局注册自定义图片属性
m0_57262819的博客
06-03 473
vue项里面,注册全局的图片自定义属性
vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法
白鲸鱼的博客
11-07 1万+
以计算器为案例 Calculator.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot; xmlns:v-on=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:v-bind=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;hea
css和js引用图片路径
lhg_119的专栏
03-15 3285
在JS文件中书写相对路径：JS文件是指在页面中引用的外部JavaScript文件，其中可能采用JavaScript代码生成html代码，由于生成的html代码是嵌入在引用该JS文件的页面中，因此，在描述相对路径时，应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。例如，文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js
在main.js中注册全局组件
xx820702的博客
04-18 1330
以后在项目当中看见某个组件，在很多模块当中都在使用，那就把它注册成全局组件，全局组件的好处，只需要注册一次可以在项目任意地方使用，注册成全局组件要在mian.js引入 //定义全局组件：在入口文件注册一次之后，在任何组件当中都可以使用 i main.js文件 import TypeNav from "@/components/TypeNav"; //第一个参数：全局组件的名字(就是那个组件里交互里写的name:"TypeNav")；第二个参数:哪一个组件 Vue.component(TypeNav.
VUE项目在Web页面可以运行，但是无法通过electron打包，会报错background.js“ to “main.js相关错误。
Kp0fS的草稿纸
09-01 886
坑， 不知道怎么解决。 electron
vue项目main.js中引用资源
轻风细雨_林木木
09-23 2393
要引用src外lib里的资源 首先，分析结构，main.js位置在src外，src与lib同级，所以使用相对路径思想即： 加…/，就好了。
前端学习之路：解决vue引入assets下图片路径找不到问题
热门推荐
标题有点难
04-03 3万+
<img :src="imgsrc2"> export default{ data(){ imgsrc2: require('../assets/logo4.png') } }
vue项目main.js引入less文件一直报错
Coder_KellySha的博客
09-03 5129
问题：在main.js中引入less文件的时候一直报这个错误     解决方法：在build-&gt;utils.js中，图中位置加入 javascriptEnabled: true // &lt;- enable this option 这句就没有问题了。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值