详解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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
php执行sql语句的写法
2009/03/10 PHP
php 正则表达式小结
2009/08/31 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
Symfony生成二维码的方法
2016/02/04 PHP
Symfony的安装和配置方法
2016/03/17 PHP
prototype 学习笔记整理
2009/07/17 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python中super关键字用法实例分析
2015/05/28 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python障碍式期权定价公式
2019/07/19 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python安装本地whl的实例步骤
2019/10/12 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python操作toml文件的示例代码
2020/11/27 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
计算机系本科生求职信
2014/05/31 职场文书
党员十八大心得体会
2014/09/12 职场文书
2015年信访工作总结
2015/04/07 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书