vue中動態加載圖片路徑的方法

assets：在項目編譯的過程中會被webpack處理解析為模塊依賴，只支持相對路徑的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相對資源路徑，將有webpack解析為模塊依賴

static：在這個目錄下文件不會被webpack處理，簡單就是說存放第三方文件的地方，不會被webpack解析。他會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對路徑的形式引用：/static[filename]

根據webpack的特性，總的來說就是static放不會變動的，第三檔的文件，asserts放可能會變動的文件。

將圖片作為模塊加載進去，比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]這樣webpack就能將其解析。

<template>
    <img v-for="item in user" :src="item.src" width="30" height="30">
</template>

<script>
export default {
  name: 'Head',
  data() {
　　return {
　　  user: [
　　　  {
　　　　　name: '111',
　　　　　grade: 'reguar',
　　　　　src: require('../assets/images/member.png')
　　　　}
　　　]
　　}
　}
}
</script>

<template>
    <img v-for="item in user" :src="require('../' + item.src)" width="30" height="30">
</template>

<script>
export default {
  name: 'Head',
  data() {
　　return {
　　  user: [
　　　  {
　　　　　name: '111',
　　　　　grade: 'reguar',
　　　　　src: 'assets/images/member.png'
　　　　}
　　　]
　　}
　}
}
</script>