Vue.js と Webpack で動的画像の読み込みが失敗するのはなぜですか?

Webpack を使用した Vue.js での動的画像の読み込みの問題

Vue.js と Webpack を使用して Web アプリケーションを構築する場合、動的画像の表示で問題が発生することがあります。課題を提起します。一般的なシナリオの 1 つは、イメージ ファイル名が変数に格納されており、完全なイメージ ソースを生成するためにベース パスに追加する必要がある場合です。

開発者は、イメージを動的に表示することを目的とした次のコードで問題が発生しました。計算されたプロパティに基づいて失敗しました:

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

興味深いことに、静的画像パスを使用した同様のアプローチは次のように機能しました。 Expected:

<img src="../assets/dog.png" alt="dog">

パズルは 2 つのアプローチの違いにありました。静的パスを使用すると、Webpack にイメージをビルドに含めるように直接指示され、実行時の可用性が保証されます。ただし、動的なアプローチは実行時に生成されるイメージ パスに依存するため、Webpack はビルド プロセス中にそれを予測できません。その結果、イメージがバンドルに含まれず、ファイルが失われます。

この問題に対処するために、開発者は、モジュールまたはファイルを動的にロードする方法を提供する require.context() メソッドに注目しました。特定のコンテキスト内で。コード

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

を使用し、HTML を次のように更新することで、

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

開発者は目的の効果を達成しました。 require.context() を使用すると、pic プロパティの値に基づいて画像ファイルを動的に読み込むことができ、Webpack は必要な画像をバンドルに含めました。

以上がVue.js と Webpack で動的画像の読み込みが失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。