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>

解決策

この問題を解決するための 1 つのアプローチは、動的モジュールの読み込みを利用することです。

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