详解Vue.js中引入图片路径的几种方式


Posted in Javascript onJune 17, 2019

vue --version 3.6.3

记录总结一下的Vue中引入图片路径的几种书写方式

vue中静态资源的引入机制

Vue.js关于静态资源的 官方文档

静态资源可以通过两种方式进行处理:

在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。

  • 诸如 <img src="..."> 、 background: url(...) 和 CSS @import 的资源
  • 例如, url(./image.png) 会被翻译为 require('./image.png')

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理,你需要通过绝对路径来引用它们。

  • 如果 URL 是一个绝对路径,例如 /images/foo.png ,它将会被保留不变。

目录结构:

vue-path/

----- public/

-------- images/

------------ XX.jpg

----- src/

-------- assets/

------------ images/

---------------- XX.jpg

-------- App.vue

...

引入示例

App.vue :

1、√

<img src="./assets/images/01.jpg" alt=""> // √
// 编译后:
<img src="/img/01.f0cfc21d.jpg" alt="">

常见的引入方式,路径是固定的字符串,图片会被webpack处理,文件若丢失会直接在编译时报错,生成的文件包含了哈希值

2、×

<img :src="'./assets/images/02.jpg'" alt=""> // ×
// 编译后:
<img src="./assets/images/02.jpg" alt="">

错误的引入方式,使用 :src 调用了 v-bind 指令处理其内容,相对路径不会被webpack的 file-loader 处理

3、√

<img :src="require('./assets/images/03.jpg')" alt=""> // √
<img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
<img :src="img3" alt=""> // √
<script>
export default:{
 data(){
 return {
  imgName:'03.jpg',
  img3:require('./assets/images/03.jpg'),
 }
 },
}
</script>
// 编译后:
<img src="/img/03.ea62525c.jpg" alt="">

当路径的文件名需要拼接变量的时候,可使用 require() 引入,在 template 的 :src 或者 script 的 data computed 中都可以进行 require 引入或拼接

4、≈

<img src="/images/04.jpg" alt=""> // -
// 编译后:
<img src="/images/04.jpg" alt="">

用绝对路径引入时,路径读取的是public文件夹中的资源,任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。

当你的应用被部署在一个域名的根路径上时,比如 http://www.abc.com/ ,此时这种引入方式可以正常显示

但是如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀

publicPath 是部署应用包时的基本 URL,在 vue.config.js 中进行配置,详情参阅 官方文档

5、√

<img :src="this.publicPath + 'images/05.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/05.jpg" alt="">
<script>
export default:{
 data(){
 return {
  publicPath: process.env.BASE_URL,
 }
 },
}
</script>

vue.config.js中:

//vue.config.js
module.exports = {
 publicPath:'/foo/',
 ...
}

引入publicPath并且将其拼接在路径中,实现引入路径的动态变动

reference

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
详解vue微信网页授权最终解决方案
Jun 16 #Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 #Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 #Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 #Javascript
简谈创建React Component的几种方式
Jun 15 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
点评js异步加载的4种方式
2015/12/22 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python中的函数用法入门教程
2014/09/02 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python threading模块操作多线程介绍
2015/04/08 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
pytorch之添加BN的实现
2020/01/06 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
MySQL面试题
2014/01/12 面试题
网络体系结构及协议的定义
2014/03/13 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
优秀幼教自荐信
2014/02/03 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
青春寄语大全
2014/04/09 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
八年级作文之感恩
2019/11/22 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers