vue中的路径和路径别名

图片src路径动态赋值

<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" />

<script>
...
methods: {
   getThumb(type) {
     let thumb = {
       WMS: require("img/world.jpg"),
       WFS: require("img/wfs.jpg"),
       tool: require("img/tool.jpg")
     };
     return thumb[type];
   }
}
...
</script>

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'img': resolve('static/img'),
      '%': resolve('./static')
    }
  },

还有就是，以下两种路径都是可以的。“/static/”是在项目根目录的static下，是吧？如果是“static/”就是vue文件的同级目录下。

<img src="/static/img/user.png" alt="">

<img src="../../static/img/user.png" alt="">