Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-12 21:34:02
Original
752 Leute haben es durchsucht

How to Dynamically Display Images in Vue.js with Computed Properties and Webpack?

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>
Nach dem Login kopieren

Dieser Ansatz funktioniert zwar einwandfrei, wenn ein statischer Bildpfad bereitgestellt wird (z. B. Wie zeige ich Bilder in Vue.js mit berechneten Eigenschaften und Webpack dynamisch an?), 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")
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage