Wie zeige ich Bilder in Vue.js-Anwendungen mit Webpack dynamisch an?

Dynamische Bilder in Vue.js-Anwendungen mit Webpack anzeigen

In Vue.js-Anwendungen kann sich das Rendern dynamischer Bilder als schwierig erweisen, wenn Bilder in Variablen gespeichert und über eine Datei abgerufen werden Wege. Um dies zu umgehen, stoßen Entwickler häufig auf Probleme, wenn sie v-bind:src mit berechneten Werten verwenden, die Bilddateinamen abrufen.

Originalmethode:

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

Problem:

Dieser Ansatz rendert keine dynamischen Bilder, wenn der Bilddateiname in einem gespeichert ist Variable.

Lösung:

Um dieses Problem zu beheben, kann eine benutzerdefinierte Methode getImgUrl definiert werden, um die Bild-URL dynamisch abzurufen und sie an das src-Attribut des img-Elements zu binden .

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

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

Warum die Originalmethode Fehlgeschlagen:

Die ursprüngliche Methode ist fehlgeschlagen, da Vue.js die Dateipfadzeichenfolge nicht dynamisch auflösen konnte. Die Funktion require.context ermöglicht Vue den Zugriff auf statische Assets innerhalb der Anwendung, was die Methode getImgUrl zu einer zuverlässigeren Lösung macht.

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