详解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的自动完成插件
Feb 03 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
原生JavaScript实现随机点名表
Jan 14 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+mysql写的留言本
2006/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
js loading加载效果实现代码
2009/11/24 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
python多进程操作实例
2014/11/21 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
仓库管理制度
2014/01/21 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Nebula Graph解决风控业务实践
2022/03/31 MySQL