img
标签支持的 URL 路径分为：绝对路径、相对路径。
| 路径 | 样例 |
|---|---|
| 绝对路径 | src='www.baidu.com/img/PCtm_d9…' |
| 相对路径 | src='./images/logo.png' 或者 src='/static/logo.png' |
首先，webpack alias 前提配置如下：
alias: {
'@images': path.join(__dirname, '../common/img')
}
然后，我们在 Vue 中通常会这么用：
// Part 1
1.
<img src='../../../common/img/bg.png'>
2.
<img src='@images/bg.png'>
3.
<img src='~@imgages/bg.png'>
因为我们在*.vue 单文件模板里使用标签，都会经过 vue-loader 编译处理成模块依赖，
会将路径的'.'开头作为相对依赖；'~'开头后、'@'开头作为模块依赖。
上面的使用方式会被编译成：
// Part 2
1;
createElement("img", { attrs: { src: require("../../../common/img/bg.png") } });
2;
createElement("img", { attrs: { src: require("@images/bg.png") } });
3;
createElement("img", { attrs: { src: require("@imgages/bg.png") } });
当然也可使用 v-bind 的方式直接 require 引入或者变量替代 require 引入，
// Part 3
1.
<img :src="require('../../../common/img/bg.png')">
2.
<img :src="require('@images/bg.png')">
3.
<img :src="require('@imgages/bg.png')">
4.
const imgSrc = require('@images/bg.png')
<img :src="imgSrc">
而在 React 中，src 的需要通过 reqiure 方式来引入，例如
// Part 4
1.
<img src={rquire('@images/bg.png')}>
2.
const imgSrc = reqiure('@images/bg.png')
<img src={imgSrc}>
但如果我们在 React 像上面 Vue 的 Part 1 方式引用就会有问题：
// Part5
1.
<img src={'../../../common/img/bg.png'}>
2.
<img src="{@images/bg.png}">
同样的问题，比如 Vue 中 这么加载资源：
// Part6
1.
<img src='/common/img/bg.png'>
2.
<img src='image/bg.png'>
以上方式都会达不到我们的预期，因为 Part1 中是 vue-loader 帮我们做了编译处理，但只会处理'.'开头、'~'开头后、'@'开头的资源，Part6 则会原样保留。 Part5 也因为 在 React 中不会经过 loader 的处理，最终 Part5、Part6 页面的表现是会向网站根目录发起图片请求：
// Part 7
1.
https://www.xxx.com/common/img/bg.png
2.
https://www.xxx.com/images/bg.png
而 webpack 的约定是不处理 public 目录资源，以上路径的图片资源就无法正常加载。
backgroud-image & @import
在 backgroud-image: url()中加载资源则无关于框架，css 或者 sass、scss 方案在 webpack 构建中最终都会经由 css-loader 处理, 处理规则如下(alias 路径要加前缀 ~ 作为模块依赖识别)：
1.
url('../../../common/img/bg.png') to require('../../../common/img/bg.png')
@import '../../../common/img/bg.png' to reqiure('../../../common/img/bg.png')
2.
url(images/bg.png) to require('./images/bg.png')
@import 'images/bg.png' to require('./images/bg.png')
3.
url('~@images/bg.png') to reqiure('@images/bg.png')
@import '~@images/bg.png' to reqiure('@images/bg.png')
