Vue.js および Webpack アプリケーションで画像を動的にレンダリングするにはどうすればよいですか?

Webpack を使用した Vue.js での動的画像レンダリング

Vue.js および Webpack アプリケーションでは、変数に基づいて画像を動的に表示する必要がある状況が発生することがあります。 。ただし、動的画像が正しく表示されないという問題が発生した場合は、根本的な問題を修正することが重要です。

この問題がよく発生する例の 1 つは、計算されたプロパティに画像のファイル名を保存する場合です。 beforeMount で非同期的に設定された Vuex ストア変数を取得します。 v-bind:src ディレクティブを使用して、動的ファイル名と静的アセット パスを連結して画像ソースを作成します。ただし、このアプローチでは常に望ましい結果が得られるとは限りません。

代わりに、より堅牢な解決策は、webpack の require.context() メソッドを活用することです。この方法を使用すると、指定された正規表現に基づいて特定のディレクトリからファイルにアクセスできます。たとえば、このメソッドを使用して、assets ディレクトリからすべての .png ファイルを取得できます。

このソリューションを実装するには、画像ファイル名を引数として受け入れるメソッドを Vue.js コンポーネントに定義します。このメソッド内で、require.context を使用して画像パスを取得し、それを返します。 HTML テンプレートで、img タグの src 属性をこのメソッドにバインドします。

require.context メソッドを動的メソッドと組み合わせて利用することで、次の問題を効果的に解決できます。 Vue.js および webpack アプリケーションでの動的なイメージのレンダリング。

以上がVue.js および Webpack アプリケーションで画像を動的にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。