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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 3016 天前的主题，其中的信息可能已经有所发展或是发生改变。

├── 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>

有好用的处理办法么？

13 条回复 • 2017-10-21 02:58:06 +08:00

SourceMan

2016-08-08 15:01:51 +08:00

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

xylitolLin

2016-08-08 15:04:36 +08:00

写成 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

2016-08-08 15:05:14 +08:00

咦，不支持 markdown ？

majik

2016-08-08 15:46:42 +08:00

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

majik

2016-08-08 15:48:11 +08:00

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

majik

2016-08-08 15:49:24 +08:00

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

SourceMan

2016-08-08 15:49:28 +08:00

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

majik

2016-08-08 15:56:24 +08:00

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

IamJ

2016-08-08 15:57:46 +08:00

这两种都不是绝对路径

SourceMan

2016-08-08 15:59:18 +08:00

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

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

majik

2016-08-08 16:00:17 +08:00

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

mlyknown

2016-08-08 23:03:41 +08:00

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

surmon

2017-10-21 02:58:06 +08:00

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

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