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>
<p>上述代码片段给出了四种场景下使用 img 标签在 vue 单文件组件中引用图片资源的方式。当然,这四种方式并不是都可以正确的加载图片资源。</p>
<p><strong>情况一:</strong></p>
<p>在模版中直接以相对路径绑定到src属性,这种情况下可以正确加载图片资源。我们知道,在 webpack 处理 vue 单文件组件的过程中,主要是 vue-loader 来做针对 *.vue 文件的处理。vue-loader 的文档中 <a href="https://vue-loader.vuejs.org/zh-cn/configurations/asset-url.html" rel="nofollow noreferrer">vue-loader 的资源路径处理</a>一节给出了 vue-loader 是如何处理模版中的资源路径的。比如: <code><img src=""></code>, <code>background: url()</code>, <code>@import</code>等都将被作为<strong>模块依赖</strong>处理。也就是说这几种情况下 vue-loader 自动处理路径的资源引用以及最后的路径替换。其中对 img 的处理如下:</p>
<img src="./logo.png">
<p>将会被 vue 模版编译器编译为:</p>
createElement('img', { attrs: { src: require('./logo.png') }})
<p>这也就解释了为什么情况一可以正确显示图片内容,是因为 vue-loader 自动帮我们做了资源引入以及路径替换问题。</p>
<p><strong>情况二:</strong></p>
<p>在模版中给 src 属性绑定了相对路径字符串变量,这种情况下图片无法正常显示。原因在于 vue-loader 无法识别变量是否为路径字符串,因此也就不存在 vue-loader 自动引入资源以及路径替换的问题了。这种情况下,编译后的模版依然为相对路径字符串。很显然,没有相应的资源引入以及错误的路径,是无法正确的展示图片的。</p>
<p><strong>情况三:</strong></p>
<p>很多人在相对路径无法正确显示的同时,尝试进行了使用绝对路径变量引入,显然这种情况下也是不能显示图片的,因为图片资源未被手动引入。<strong>注意:</strong> 很多同学尝试手动引入资源然后按照绝对路径变量绑定 src,发现 <code>dist/static/img/</code> 路径下确实有了被引用的资源,但是 vue-cli webpack 模版中 url-loader 对于 img 类型的文件在加载时,添加了 hash 值的处理。在这种情况下,即使我们绑定的是绝对路径变量,因为无法正确匹配被添加 hash 值的图片文件,我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下,推荐情况四的处理方式。</p>
<p><strong>情况四:</strong></p>
<p>在模版中 src 属性直接绑定手动引入的图片资源,这种情况下可以正确的显示图片。这样的方式也是 vue-loader 在处理自动引入路径对应的资源时使用的办法。</p>
<p>综上,在 vue 单文件组件中,正确的显示一个图片的关键:</p>
<ul>
<li>该图片资源被 require 或 import ,即会被 webpack 的 url-loader 处理到最后的目录中</li>
<li>img src 属性需要被替换为最后的图片资源路径</li>
</ul>
<p>以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片,就在于两种情况下满足了以上两个条件。情况一中 vue-loader 自动帮我们做了这个事情,情况四我们手动做了这个事情。</p>
<p><strong>开发中可能遇到的问题:</strong></p>
<p>开发中可能会遇到循环渲染一个图片列表的场景,根据上面的总结,我们可以构造一个图片信息对象数组,比如:</p>
<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>
<p>这样我们就可以完美的显示我们循环渲染的图片了。</p>
原文地址:https://segmentfault.com/a/1190000012731617
vue单文件中引用路径的处理的更多相关文章
- vue单文件中scoped样式如何穿透?
在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性, ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- JAVA文件中获取路径及WEB应用程序获取路径方法
JAVA文件中获取路径及WEB应用程序获取路径方法 1. 基本概念的理解 `绝对路径`:你应用上的文件或目录在硬盘上真正的路径,如:URL.物理路径 例如: c:/xyz/test.txt代表了tes ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- javascript 在js文件中获取路径
如果在*.js文件中获取当自己当前的路径是很重要的. 举个例子,如果一个css文件中引用图片,如background-img: url('./Images/bg.png').那么图片的路径,是相对于c ...
随机推荐
- luogo p3379 【模板】最近公共祖先(LCA)
[模板]最近公共祖先(LCA) 题意 给一个树,然后多次询问(a,b)的LCA 模板(主要参考一些大佬的模板) #include<bits/stdc++.h> //自己的2点:树的邻接链表 ...
- HDU 2303 The Embarrassed Cryptographer
The Embarrassed Cryptographer 题意 给一个两个素数乘积(1e100)K, 给以个数L(1e6), 判断K的两个素数是不是都大于L 题解 对于这么大的范围,素数肯定是要打表 ...
- npx命令
npx命令 查了一下, 英文资料: https://www.npmjs.com/package/npx 中文资料: 什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If yo ...
- zabbix_get 获取agnet端mysql数据失败
问题 在使用zabbix_get获取agent端的mysql数据时,总是报错,ERROR 2002 (HY000): Can't connect to local MySQL server throu ...
- python3三级菜单的访问,并按q退出
#/usr/bin/env python#yehui'''作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典'''import readlineclass MultiLeve ...
- Vue官网todoMVC示例
这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令.让我们一步步来探讨一下.官网demo 要实现的功能 单条添加todo 单条删除todo 双击编辑todo ...
- 使用Oracle Database Instant Client 精简版
如果只为了在开发环境中访问Oracle,推荐使用Oracle Database Instant Client(精简版)它相对小巧且不需要安装绿色方便移植. 官方下载Instant Client,在Or ...
- js应用中的小细节-时间戳的转换和input输入框有效数字
1 input输入框内value值保留有效数字,js自带的方法.toFixed(),但是直接使用会报错,因为不论输入框内输入汉字.字母还是数字,类型都是string.解决的办法是将其转换为number ...
- ASP.NET-Active Direcotry编程示例
查找指定的AD帐号 using (DirectoryEntry de = new DirectoryEntry("LDAP://RootDSE")) { string DCName ...
- Xshell dns tunnel攻击
该域名还会向多个超长域名做渗出,且域名采用了 DGA 生成算法,通过 DNS 解析时渗出数据. 部分生成域名如下: sajajlyoogrmkjlkmosbxowcrmwlvajdkbtbjoylyp ...