详解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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
微信小程序联网请求的轮播图
Jul 07 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
JS中的继承操作实例总结
Jun 06 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
校本教研工作制度
2014/01/22 职场文书
实用的简历自我评价
2014/03/06 职场文书
医院义诊活动总结
2014/07/04 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
可可西里观后感
2015/06/08 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
Python数组变形的几种实现方法
2022/05/30 Python