Vue bindet Bildadressen dynamisch und die Lösung des Problems, dass die Verwendung von require ebenfalls fehlschlägt

Schauen wir uns zunächst die Auswirkungen der Anzeige von Bildern auf vier Arten an

Code:

<div v-if="weather">
  {
   
   { weather.location.name }} | {
   
   { weather.now.text }} | {
   
   { weather.now.temperature }}℃
  <img src="../../assets/img/weather/0.png" alt="" style="width:40px;height:40px;" />
  <img :src="iconUrl" alt="" style="width:40px;height:40px;" />
  <img :src="require('../../assets/img/weather/0.png')" alt="" style="width:40px;height:40px;" />
  <img :src="require('../../assets/img/weather/' + imgName)" alt="" style="width:40px;height:40px;" />
</div>

data() {
    
    
  return {
    
    
    weather: "",
    iconUrl: require('../../assets/img/weather/0.png'),
    url: "../../assets/img/weather/0.png",
    imgName: '0.png',
  }
},

Ich glaube, dass viele Leute die zweite Methode verwenden werden, um Adressen dynamisch zu binden, aber das Bild kann nicht angezeigt werden, weil:

Das Vue-Projekt komprimiert den Code beim Ausführen des Pakets und ändert dadurch den absoluten Pfad in der iconUrl. Wenn wir die iconUrl in den Daten nicht ändern, wird ein Fehler angezeigt. Und erfordern Sie ('Bildspeicherpfad' + imgName), schreiben Sie den Bildspeicherpfad, denn mit dem Bildspeicherpfad gibt er den Bildspeicherpfad ein, um imgName zu finden. Wenn er den Bildspeicherpfad nicht schreibt, geht er zu ./ Pfad zur Suche. imgName.

Lösung:
Nehmen Sie ähnlich wie bei der vierten Lösung den Bildnamen separat heraus und ersetzen Sie ihn dynamisch, um eine dynamische Bindungsanzeige des Bildes zu erreichen.