如何使用計算屬性和 Webpack 在 Vue.js 中動態顯示映像？

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

在使用webpack 的Vue.js 應用程式中，嘗試動態顯示影像時可能會遇到挑戰顯示檔案名稱儲存在運算屬性中的影像。具體來說，如果這些屬性依賴於非同步填充的 Vuex 儲存變量，您可能會發現影像路徑未正確解析。

考慮以下Vue 模板：

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

雖然此方法有效當提供靜態圖像路徑時（例如，），當路徑是從計算動態生成時，它無法顯示圖像財產。類似的問題已在此小提琴中報告並解決。

要解決此問題，您可以使用以下 JavaScript 程式碼：

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

此函數利用 webpack 的 require.context() 動態地根據提供的檔案名稱從特定目錄載入圖片。

在HTML 範本中，應更新v-bind:src 屬性以引用getImgUrl() 函數，而不是直接產生路徑：

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

透過實作此解決方案，即使影像檔案名儲存在運算屬性中，您也可以使用webpack 在Vue.js 應用程式中動態顯示圖片。

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