详解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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jquery实现图片预加载
Dec 25 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP新手上路(九)
2006/10/09 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
小程序转发探索示例
2019/02/19 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue实现页面切换滑动效果
2020/06/29 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
详解Swift中属性的声明与作用
2016/06/30 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python生成随机红包的实例写法
2019/09/02 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
生产车间主管岗位职责
2013/12/28 职场文书
中学教师自我鉴定
2014/02/07 职场文书
大学军训感言1500字
2014/03/09 职场文书
骨干教师考核评语
2014/12/31 职场文书
长城导游词
2015/01/30 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS