关于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 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
探寻PHP脚本不报错的原因
2014/06/12 PHP
CI框架常用函数封装实例
2016/11/21 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python实现对输入的密文加密
2019/03/20 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
创建Django项目图文实例详解
2019/06/06 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫