在專案開發中，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": "景點門票"
        }
      ]

 這樣圖片就可以成功引入了