如何在 Vue.js 和 Webpack 應用程式中動態渲染影像？

Vue.js 與Webpack 中的動態影像渲染

在Vue.js 和webpack 應用程式中，您可能會遇到需要基於變數動態顯示影像的情況。但是，如果您遇到動態影像無法正確顯示的問題，那麼修正根本問題非常重要。

經常出現此問題的實例是當您將圖像的檔案名稱儲存在計算屬性中時檢索在 beforeMount 上非同步填充的 Vuex 儲存變數。使用 v-bind:src 指令，您打算將動態檔案名稱與靜態資源路徑連接起來以建立映像來源。然而，這種方法可能並不總是能產生預期的結果。

相反，更強大的解決方案是利用 webpack 的 require.context() 方法。此方法可讓您根據提供的正規表示式存取特定目錄中的檔案。例如，您可以使用此方法從資產目錄中取得所有 .png 檔案。

要實作此解決方案，請在 Vue.js 元件中定義一個方法，該方法接受映像檔名作為參數。在此方法中，使用 require.context 檢索映像路徑並傳回它。在 HTML 範本中，將 img 標籤的 src 屬性綁定到此方法。

將 require.context 方法與動態方法結合使用，可以有效解決Vue.js 和 webpack 應用程式中的動態影像渲染。

以上是如何在 Vue.js 和 Webpack 應用程式中動態渲染影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！