vue中图片src路径赋值

vue中引入static文件夹中图片，本以为src中直接写入图片所在路径即可，结果发现图片无法显示，控制台报404错误，图片无法找到。网上找到解决方案，在此mark一下，以便以后查询。

图片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>

img为设置的路径别名

...
  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')
    }
  },
...

固定路径

如果是固定路径的话:

<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />