Wie zeige ich dynamische Bilder in Vue.js mit Webpack an?

Dynamische Bilder in Vue.js mit Webpack anzeigen

In mit Webpack erstellten Vue.js-Webanwendungen kann die Anzeige dynamischer Bilder eine häufige Anforderung sein. Es kann jedoch frustrierend sein, bei dieser Funktionalität auf Probleme zu stoßen. Lassen Sie uns ein bestimmtes Szenario untersuchen und eine Lösung erkunden.

Das Problem

Im bereitgestellten Code-Snippet wird versucht, in einer Variablen Wie zeige ich dynamische Bilder in Vue.js mit Webpack an? gespeicherte Bilder dynamisch anzuzeigen. Die Bilder werden aus einer Vuex-Speichervariablen abgerufen, die asynchron auf beforeMount aufgefüllt wird. Allerdings funktioniert die dynamische Bildanzeige nicht, während statisch definierte Bildpfade korrekt funktionieren.

<img v-bind:src="'../assets/' Wie zeige ich dynamische Bilder in Vue.js mit Webpack an? '.png' " v-bind:alt="Wie zeige ich dynamische Bilder in Vue.js mit Webpack an?"><br>

Die Lösung

Ein Ansatz zur Lösung dieses Problems besteht darin, das dynamische Laden von Modulen zu nutzen :

<br>getImgUrl(pet) {<pre class="brush:php;toolbar:false">var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")

}

Im HTML kann der dynamische Bildpfad sein Zugriff über:

<br><img :src="getImgUrl(Wie zeige ich dynamische Bilder in Vue.js mit Webpack an?)" v-bind:alt="Wie zeige ich dynamische Bilder in Vue.js mit Webpack an?"><br>

Dieser Ansatz verwendet ein dynamischer Modulkontext zum Laden von Bildern aus einem angegebenen Verzeichnis, was eine dynamische Bildanzeige ermöglicht.

Das obige ist der detaillierte Inhalt vonWie zeige ich dynamische Bilder in Vue.js mit Webpack an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!