為什麼 Vue.js 和 Webpack 動態映像載入失敗？

Vue.js 與Webpack 中的動態影像載入問題

使用Vue.js 和Webpack 建立Web 應用程式時，有時會顯示動態影像提出挑戰。常見的情況是圖像檔案名稱儲存在變數中，並且需要附加到基本路徑以產生完整的圖像來源。

開發人員遇到了一個問題，其中以下程式碼旨在動態顯示圖像基於計算屬性，失敗：

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

有趣的是，使用靜態圖像路徑的類似方法按預期工作：

<img src="../assets/dog.png" alt="dog">

謎題在於兩種方法之間的差異。使用靜態路徑直接指示 Webpack 將映像包含在建置中，確保其在執行時的可用性。然而，動態方法依賴執行時產生的映像路徑，而 Webpack 在建置過程中無法預測這一點。因此，該圖像未包含在捆綁包中，從而導致檔案遺失。

為了解決這個問題，開發人員轉向了 require.context() 方法，該方法提供了一種動態載入模組或檔案的方法在特定的背景下。透過使用以下程式碼：

getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
}

並如下更新 HTML：

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

開發人員達到了預期的效果。 require.context() 允許他們根據 pic 屬性的值動態載入映像文件，並且 Webpack 將所需的映像包含在套件中。

以上是為什麼 Vue.js 和 Webpack 動態映像載入失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！