Wie kann ich Bilder in meiner Vue.js- und Webpack-Anwendung dynamisch rendern?

Dynamische Bildwiedergabe in Vue.js mit Webpack

In einer Vue.js- und Webpack-Anwendung kann es vorkommen, dass Sie Bilder dynamisch basierend auf Variablen anzeigen müssen . Wenn Sie jedoch auf Probleme stoßen, bei denen dynamische Bilder nicht korrekt angezeigt werden, ist es wichtig, das zugrunde liegende Problem zu beheben.

Ein Beispiel, bei dem dieses Problem häufig auftritt, ist, wenn Sie die Dateinamen von Bildern in einer berechneten Eigenschaft speichern das eine Vuex-Speichervariable abruft, die asynchron auf beforeMount aufgefüllt wird. Mithilfe der v-bind:src-Direktive möchten Sie den dynamischen Dateinamen mit einem statischen Asset-Pfad verketten, um die Bildquelle zu erstellen. Dieser Ansatz führt jedoch möglicherweise nicht immer zu den gewünschten Ergebnissen.

Stattdessen besteht eine robustere Lösung darin, die Methode require.context() von Webpack zu nutzen. Mit dieser Methode können Sie basierend auf bereitgestellten regulären Ausdrücken auf Dateien aus bestimmten Verzeichnissen zugreifen. Mit dieser Methode können Sie beispielsweise alle PNG-Dateien aus dem Assets-Verzeichnis abrufen.

Um diese Lösung zu implementieren, definieren Sie eine Methode in Ihrer Vue.js-Komponente, die den Namen der Bilddatei als Argument akzeptiert. Verwenden Sie innerhalb dieser Methode require.context, um den Bildpfad abzurufen und zurückzugeben. Binden Sie in Ihrer HTML-Vorlage das src-Attribut des img-Tags an diese Methode.

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

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

Durch die Verwendung der require.context-Methode in Verbindung mit Ihrer dynamischen Methode können Sie das Problem effektiv lösen dynamische Bildwiedergabe in Ihrer Vue.js- und Webpack-Anwendung.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder in meiner Vue.js- und Webpack-Anwendung dynamisch rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!