V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
majik
V2EX  ›  Vue.js

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

  •  
  •   majik · 2016-08-08 14:51:39 +08:00 · 26586 次点击
    这是一个创建于 3014 天前的主题,其中的信息可能已经有所发展或是发生改变。
    ├── 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
        1
    SourceMan  
       2016-08-08 15:01:51 +08:00
    写个 alias
    resolve: {
    alias: {
    'assets': path.resolve(__dirname, '../src/assets'),
    }
    }
    xylitolLin
        2
    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
        3
    xylitolLin  
       2016-08-08 15:05:14 +08:00
    咦,不支持 markdown ?
    majik
        4
    majik  
    OP
       2016-08-08 15:46:42 +08:00
    @SourceMan 这个已经写了,但是并没有用 = =
    majik
        5
    majik  
    OP
       2016-08-08 15:48:11 +08:00
    @xylitolLin 我暂时就是用变量的方式绑定到页面上,但是这个图片只是用一次,也不会改变,难道还要为此去 import ?感觉有点脏
    majik
        6
    majik  
    OP
       2016-08-08 15:49:24 +08:00
    @SourceMan 在 <script> 标签中 import 这个设置是有用的
    SourceMan
        7
    SourceMan  
       2016-08-08 15:49:28 +08:00   ❤️ 1
    @majik
    src="~assets/logo.png" 记得加上 ~
    majik
        8
    majik  
    OP
       2016-08-08 15:56:24 +08:00
    @SourceMan 虽然看起来不太舒服,但是解决了。 Huge thx
    IamJ
        9
    IamJ  
       2016-08-08 15:57:46 +08:00
    这两种都不是绝对路径
    SourceMan
        10
    SourceMan  
       2016-08-08 15:59:18 +08:00
    @majik 那可能你理解有偏差了,这是通用的做法


    @IamJ 嗯嗯,你说得对,都是相对路径,只是设置了个别名
    majik
        11
    majik  
    OP
       2016-08-08 16:00:17 +08:00
    @IamJ 恩,明白。
    至少看起来像而且可用。
    因为要考虑文件的层次关系,所以相对路径的引入肯定不合适。
    不知可有高端的解决方式?
    mlyknown
        12
    mlyknown  
       2016-08-08 23:03:41 +08:00
    ~assets/logo.png;../../assets/logo.png;assets/logo.png; 这三种有什么区别呢
    surmon
        13
    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 的目录别名,所以也是相对路径

    上面三个本质都一样,只是在不同阶段被不同的解析器进行了转换处理
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2821 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:38 · PVG 19:38 · LAX 03:38 · JFK 06:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.