Webpack を使用して Vue.js アプリケーションで画像を動的に表示する方法

Webpack を使用した Vue.js アプリケーションでの動的イメージの表示

Vue.js アプリケーションでは、イメージが変数に保存され、ファイルを通じてアクセスされる場合、動的イメージのレンダリングが困難になることがあります。パス。これを解決するために、開発者は、画像ファイル名を取得する計算値を指定して v-bind:src を使用するときに一般的に問題に遭遇します。

元のメソッド:

<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">

問題:

画像ファイル名が保存されている場合、このアプローチでは動的画像がレンダリングされません。

解決策:

これを解決するには、カスタム メソッド getImgUrl を定義して、画像の URL を動的に取得し、それを画像の src 属性にバインドします。 element.

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

<!-- HTML -->
<img :src="getImgUrl(pic)" v-bind:alt="pic">

元のメソッドを使用する理由失敗:

Vue.js がファイル パス文字列を動的に解決できなかったため、元のメソッドは失敗しました。 require.context 関数を使用すると、Vue がアプリケーション内の静的アセットにアクセスできるようになり、getImgUrl メソッドがより信頼性の高いソリューションになります。

以上がWebpack を使用して Vue.js アプリケーションで画像を動的に表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。