技術標籤：技術開發Vue.jsvue

Vue在v-for迴圈中動態載入相對路徑圖片，Error: Cannot find module 'xxx’的問題；
通過v-for來迴圈圖片（圖片是在當前專案內-相對路徑）

先貼出正確的程式碼

<template>
  <div style="font-size: 0.15rem;">
    <div class="tab">
      <img :src="item.url" v-for="item in imgs" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavHeader',
  data () {
    return {
      imgs: [
        {
          url: require('./img/global_img.png')
        },
        {
          url: require('./img/global_img2.png')
        }
      ]
    }
  }
}
</script>
 

如上是可以正常顯示的；

————————————————————————————————————————

接下來是需要避雷的寫法：（第1種）

<template>
  <div style="font-size: 0.15rem;">
    <div class="tab">
      <img :src="item.url" v-for="item in imgs" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavHeader',
  data () {
    return {
      imgs: [
        {
          url: './img/global_img.png'
        },
        {
          url: './img/global_img2.png'
        }
      ]
    }
  }
}
</script>
 

如上這種寫法會導致圖片無法加載出來，不解析；
原因：Vue中載入相對路徑資源需要加上require()才被解析；

————————————————————————————————————————

因為require()是JS解析的語法，所以在繫結元素語法:src裡也可以解析，嘗試瞭如下寫法：

<template>
  <div style="font-size: 0.15rem;">
    <div class="tab">
      <img :src="require('./img/global_img.png')" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavHeader',
  data () {
    return {
    }
  }
}
</script>
 

正常執行，圖片能夠被解析。

然後試著把圖片資源通過v-for動態載入（第2種）：

<template>
  <div style="font-size: 0.15rem;">
    <div class="tab">
      <img :src="require(item.url)" v-for="item in imgs" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavHeader',
  data () {
    return {
      imgs: [
        {
          url: './img/global_img.png'
        },
        {
          url: './img/global_img2.png'
        }
      ]
    }
  }
}
</script>

卻出現瞭如下錯誤：

Error in render: “Error: Cannot find module ‘./img/global_img.png’”

其實這種跟上面的寫法是一樣的，無非是圖片連結是通過v-for動態化加載出來的，但是卻很奇怪的沒有解析到報錯了
。。。。。

————————————————————————————————————————

最後的寫法便是開頭貼出的程式碼了，data裡的圖片陣列imgs賦值圖片的url時，就加上require()來解析，html模板直接渲染此圖片資源~

或許是在Vue中，動態取值和require()語法相沖突了，不得不說，這是一個坑。