关于vue单文件中引用路径的处理方法


Posted in Javascript onJanuary 08, 2018

前言

Vue 的单文件组件在使用 Vue 时非常常用,而在vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <img> 的 src 处理,解释了在使用 vue+webpack 的开发过程中如何正确的引用静态资源(比如图片的处理)。

如下所示,在下面的单文件组件中给出了不同场景下引用图片路径的示例(图片静态资源存放在 src/assets/small.png ):

<template>
 <div id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片资源测试">
 </div>
</template>
<script>
import smallImg from './assets/small.png';
export default {
 name: 'app',
 data() {
 return {
 smallImg: smallImg,
 relative_img: './assets/small.png',
 absolute_img: '/static/img/small.png',
 };
 },
}
</script>

上述代码片段给出了四种场景下使用 img 标签在 vue 单文件组件中引用图片资源的方式。当然,这四种方式并不是都可以正确的加载图片资源。

情况一:

在模版中直接以相对路径绑定到src属性,这种情况下可以正确加载图片资源。我们知道,在 webpack 处理 vue 单文件组件的过程中,主要是 vue-loader 来做针对 *.vue 文件的处理。vue-loader 的文档中 vue-loader 的资源路径处理一节给出了 vue-loader 是如何处理模版中的资源路径的。比如: <img src="">, background: url(), @import等都将被作为模块依赖处理。也就是说这几种情况下 vue-loader 自动处理路径的资源引用以及最后的路径替换。其中对 img 的处理如下:

<img src="./logo.png">

将会被 vue 模版编译器编译为:

createElement('img', { attrs: { src: require('./logo.png') }})

这也就解释了为什么情况一可以正确显示图片内容,是因为 vue-loader 自动帮我们做了资源引入以及路径替换问题。

情况二:

在模版中给 src 属性绑定了相对路径字符串变量,这种情况下图片无法正常显示。原因在于 vue-loader 无法识别变量是否为路径字符串,因此也就不存在 vue-loader 自动引入资源以及路径替换的问题了。这种情况下,编译后的模版依然为相对路径字符串。很显然,没有相应的资源引入以及错误的路径,是无法正确的展示图片的。

情况三:

很多人在相对路径无法正确显示的同时,尝试进行了使用绝对路径变量引入,显然这种情况下也是不能显示图片的,因为图片资源未被手动引入。注意: 很多同学尝试手动引入资源然后按照绝对路径变量绑定 src,发现 dist/static/img/ 路径下确实有了被引用的资源,但是 vue-cli webpack 模版中 url-loader 对于 img 类型的文件在加载时,添加了 hash 值的处理。在这种情况下,即使我们绑定的是绝对路径变量,因为无法正确匹配被添加 hash 值的图片文件,我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下,推荐情况四的处理方式。

情况四:

在模版中 src 属性直接绑定手动引入的图片资源,这种情况下可以正确的显示图片。这样的方式也是 vue-loader 在处理自动引入路径对应的资源时使用的办法。

综上,在 vue 单文件组件中,正确的显示一个图片的关键:

  • 该图片资源被 require 或 import ,即会被 webpack 的 url-loader 处理到最后的目录中
  • img src 属性需要被替换为最后的图片资源路径

以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片,就在于两种情况下满足了以上两个条件。情况一中 vue-loader 自动帮我们做了这个事情,情况四我们手动做了这个事情。

开发中可能遇到的问题:

开发中可能会遇到循环渲染一个图片列表的场景,根据上面的总结,我们可以构造一个图片信息对象数组,比如:

<template>
 <div id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </div>
</template>
<script>
import smallImg from './assets/small.png';
import bigImg from './assets/big.jpg';
export default {
 name: 'app',
 data() {
 return {
 smallImg: smallImg,
 relative_img: './assets/small.png',
 absolute_img: '/static/img/small.png',
 imgList: [
 { id: 1, title: 'test1', src: require('./assets/logo1.png') },
 { id: 2, title: 'test2', src: require('./assets/logo2.png') },
 { id: 3, title: 'test3', src: require('./assets/logo3.png') },
 ],
 };
 },
}
</script>

这样我们就可以完美的显示我们循环渲染的图片了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 #Javascript
Node.js使用Koa搭建 基础项目
Jan 08 #Javascript
JavaScript体验异步更好的解决办法
Jan 08 #Javascript
探索Vue高阶组件的使用
Jan 08 #Javascript
Vue入门之数据绑定(小结)
Jan 08 #Javascript
浅谈Vue数据绑定的原理
Jan 08 #Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
测试php函数的方法
2013/11/13 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
详解Vite的新体验
2021/02/22 Javascript
python实现简单购物商城
2016/05/21 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
简单了解python的break、continue、pass
2019/07/08 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
应届护士推荐信
2013/11/16 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
小组口号大全
2014/06/09 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
商场收银员岗位职责
2015/04/07 职场文书
商业计划书范文
2019/04/24 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL