計算されたプロパティと 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 テンプレートでは、パスを直接生成するのではなく、getImgUrl() 関数を参照するように v-bind:src 属性を更新する必要があります。

<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 中国語 Web サイトの他の関連記事を参照してください。