Vue在data中存入静态图片地址，使用别名引入的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33737087/article/details/84428134

在项目开发中，icons的引入遇见了麻烦

在data中存入一组图片地址，并且循环渲染到组件上

<div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)">
   <img class="icons-img" :src="icon.imgUrl" />
   <p class="icons-desc">{{icon.desc}}</p>
</div>

data () {
    return {
      list: [
        {
          "type": "scenic",
          "imgUrl": 'assets/webIcons/scenic.png',
          "desc": "景点门票"
        }
      ]
    }
  }

webpack已经配置了别名

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common'),
      'assets': resolve('src/assets')
    }
  },

但是发现有问题

 图片地址没有背正确的解析

解决办法

在html中 需要在别名前面加上 ~ 符号

<img src="~assets/webIcons/scenic.png" />

在js中，需要使用require('url')

list: [
        {
          "type": "scenic",
          "imgUrl": require('assets/webIcons/scenic.png'),
          "desc": "景点门票"
        }
      ]

 这样图片就可以成功引入了