webpack 构建 vue 中，如何使用绝对路径引用图片

[majik]

├── src
│   ├── assets
│   │   └── logo.png
│   ├── blueprints
│   │   ├── base
│   │   │   ├── index.js
│   │   │   └── page.vue
│   │   ├── base2
│   │   │   ├── index.js
│   │   │   └── page.vue
│   │   └── index.js
│   ├── components
│   │   └── Hello.vue
│   ├── main.js
│   └── widgets

在 src/blueprints/base/page.vue 中，我想通过绝对路径来引用 src/assets/logo.png

<template>
  <img class="logo" src="../../assets/logo.png">
</template>

如果使用相对路径， loader 可以将其处理为 base64 image 。使用绝对路径 loader 无法识别。

我想这么写

<template>
  <img class="logo" src="assets/logo.png">
</template>

有好用的处理办法么？

[SourceMan]

写个 alias
resolve: {
alias: {
'assets': path.resolve(__dirname, '../src/assets'),
}
}

[xylitolLin]

写成 data

````javascript

<template>
<img class="logo" v-bind:src="pic">
</template>

<script>
var pic = require('***/pic.png')

module.exports = {
data: function() {
return {
pic: pic
}
}
}
</script>

````

[xylitolLin]

咦，不支持 markdown ？

[majik]

@SourceMan 这个已经写了，但是并没有用 = =

[majik]

@xylitolLin 我暂时就是用变量的方式绑定到页面上，但是这个图片只是用一次，也不会改变，难道还要为此去 import ？感觉有点脏

[majik]

@SourceMan 在 <script> 标签中 import 这个设置是有用的

[SourceMan]

@majik
src="~assets/logo.png" 记得加上 ~

[majik]

@SourceMan 虽然看起来不太舒服，但是解决了。 Huge thx

[IamJ]

这两种都不是绝对路径

[SourceMan]

@majik 那可能你理解有偏差了，这是通用的做法


@IamJ 嗯嗯，你说得对，都是相对路径，只是设置了个别名

[majik]

@IamJ 恩，明白。
至少看起来像而且可用。
因为要考虑文件的层次关系，所以相对路径的引入肯定不合适。
不知可有高端的解决方式？

[mlyknown]

~assets/logo.png;../../assets/logo.png;assets/logo.png; 这三种有什么区别呢

[surmon]

@mlyknown
1. ~assets/logo.png 其中 ~ 是 src 路径的默认别名
2. ../../assets/logo.png 这是相对路径
3. assets/logo.png 这是因为在 webpack 中已经设置了 assets 为 src/assets 的目录别名，所以也是相对路径

上面三个本质都一样，只是在不同阶段被不同的解析器进行了转换处理