详解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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
Vue的props父传子的示例代码
May 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简单静态页生成过程
2008/03/27 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
详解Document.Cookie
2015/12/25 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python字符串中的单双引
2017/02/16 Python
pandas的qcut()方法详解
2019/07/06 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
django 多数据库及分库实现方式
2020/04/01 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
新春文艺演出主持词
2014/03/27 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
司机岗位职责范本
2015/04/10 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL