如何使用 Webpack 在 Vue.js 中顯示動態圖片？

使用Webpack 在Vue.js 中顯示動態影像

在使用webpack 建立的Vue.js Web 應用程式中，顯示動態影像可能是常見的需求。然而，遇到此功能的問題可能會令人沮喪。讓我們深入研究特定場景並探索解決方案。

問題

在提供的程式碼片段中，嘗試動態顯示儲存在變數 如何使用 Webpack 在 Vue.js 中顯示動態圖片？ 中的圖像。影像是從 Vuex 儲存變數中檢索的，該變數在 beforeMount 上非同步填充。但是，動態影像顯示不起作用，而靜態定義的影像路徑可以正常運作。

<img v-bind:src="'../assets/' 如何使用 Webpack 在 Vue.js 中顯示動態圖片？ '.png' " v-bind:alt="如何使用 Webpack 在 Vue.js 中顯示動態圖片？"><br>

解決方案

解決此問題的一種方法是利用動態模組載入：

<br>getImgUrl(pet) {<pre class="brush:php;toolbar:false">var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")

}

HTML中可以存取動態圖片路徑使用：

<br><img :src="getImgUrl(如何使用 Webpack 在 Vue.js 中顯示動態圖片？)" v-bind:alt="如何使用 Webpack 在 Vue.js 中顯示動態圖片？"><br>

此方法使用動態模組上下文從指定目錄載入影像，允許動態影像顯示。

以上是如何使用 Webpack 在 Vue.js 中顯示動態圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！