关于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 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jquery中post方法用法实例
Oct 21 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
Node.js学习入门
Jan 03 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
js防抖和节流的深入讲解
Dec 06 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
浅谈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
php读取excel文件的简单实例
2013/08/26 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
python提示No module named images的解决方法
2014/09/29 Python
python黑魔法之编码转换
2016/01/25 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
区优秀教师事迹材料
2014/02/10 职场文书
人力资源作业细则
2014/03/03 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
物业接待员岗位职责
2015/04/15 职场文书
金陵十三钗观后感
2015/06/04 职场文书