前言
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 自动引入资源以及路径替换的问题了。这种情况下，编译后的模版依然为相对路径字符串。很显然，没有相应的资源引入以及错误的路径，是无法正确的展示图片的。
