Wie zeige ich Bilder in Vue.js mit berechneten Eigenschaften und Webpack dynamisch an?

Dynamische Bildanzeige in Vue.js mit Webpack

In einer Vue.js-Anwendung, die Webpack verwendet, kann es beim Versuch einer dynamischen Darstellung zu Herausforderungen kommen Zeigt Bilder an, deren Dateinamen in berechneten Eigenschaften gespeichert sind. Insbesondere wenn diese Eigenschaften von asynchron gefüllten Vuex-Speichervariablen abhängen, stellen Sie möglicherweise fest, dass Bildpfade nicht korrekt aufgelöst werden.

Betrachten Sie die folgende Vue-Vorlage:

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

Dieser Ansatz funktioniert zwar einwandfrei, wenn ein statischer Bildpfad bereitgestellt wird (z. B. ), Das Bild wird nicht angezeigt, wenn der Pfad dynamisch aus einer berechneten Eigenschaft generiert wird. Ähnliche Probleme wurden in dieser Geige gemeldet und behoben.

Um dieses Problem zu beheben, können Sie den folgenden JavaScript-Code verwenden:

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

Diese Funktion nutzt require.context() des Webpacks für dynamische Laden Sie Bilder aus einem bestimmten Verzeichnis basierend auf dem angegebenen Dateinamen.

In der HTML-Vorlage sollte das Attribut v-bind:src aktualisiert werden, um auf zu verweisen getImgUrl()-Funktion, anstatt den Pfad direkt zu generieren:

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

Durch die Implementierung dieser Lösung können Sie Bilder in Ihrer Vue.js-Anwendung mit Webpack dynamisch anzeigen, auch wenn die Bilddateinamen in berechneten Eigenschaften gespeichert sind.

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