详解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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
js DOM模型操作
Dec 28 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
javascript自定义日期比较函数用法示例
Jul 22 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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
python中json格式数据输出的简单实现方法
2016/10/31 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python os.listdir()乱码解决方案
2021/01/31 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
应聘自荐信
2013/12/14 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
计划生育汇报材料
2014/12/26 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Python生成九宫格图片的示例代码
2021/04/14 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS
JavaScript实现简单的音乐播放器
2022/08/14 Javascript