基於 webpack 打包動態加載圖片 src 問題

基於 webpack 打包動態加載圖片 src 問題

直接上代碼：

<template>
  <ul class="la-photo-wall">
    <li class="la-photo-wall-item" v-for="(item,index) in imgData" :key="index">
      <img class="la-photo-wall-item-img" :src="item.img" alt="">
    </li>
  </ul>
</template>
<script>
export default {
  computed: {
    imgData() {
      let datas = [];
      for (var i = 1; i < 21; i++) {
        datas.push({
          img: './img/' + i + '.jpg',//動態圖片路徑
        });
      }
      return datas;
    }
  }
};
</script>

結果：

結果發現圖片不顯示，錯誤碼爲 404。

報錯的緣由：在 webpack 中會將圖片當作模塊來用，好比：[{img:require('./src.jpg')}]由於是動態加載的，因此 url-loader 將沒法解析圖片地址。

常見的解決辦法有兩種：

1. 用 require 蔣圖片做爲模塊加載，這時候 webpack 打包時，會將 require 打包成模塊。
2. 將圖片放到 static 目錄下，但必須寫成絕對路徑，好比：[{img:'/static/src.jpg'}]。

好了，根據上述的解決方案，能不能行呢？下面對應的試一下！

1. 方法一：

源碼

<template>
  <ul class="la-photo-wall">
    <li class="la-photo-wall-item" v-for="(item,index) in imgData" :key="index">
      <img class="la-photo-wall-item-img" :src="item.img" alt="">
    </li>
  </ul>
</template>
<script>
export default {
  computed: {
    imgData() {
      let datas = [];
      for (var i = 1; i < 21; i++) {
        datas.push({
          img: require('./img/' + i + '.jpg'),
        });
      }
      return datas;
    }
  }
};
</script>

1. 方法二：

源碼

<template>
  <ul class="la-photo-wall">
    <li class="la-photo-wall-item" v-for="(item,index) in imgData" :key="index">
      <img class="la-photo-wall-item-img" :src="item.img" alt="">
    </li>
  </ul>
</template>
<script>
export default {
  computed: {
    imgData() {
      let datas = [];
      for (var i = 1; i < 21; i++) {
        datas.push({
          img: '/static/img/' + i + '.jpg',
        });
      }
      return datas;
    }
  }
};
</script>

結果：

好了，通過試驗，能夠完美解決問題。