Wenn wir v-bind direkt zum Importieren verwenden, kann es nicht normal importiert werden.
<image :src="item.src" alt=""/>Dies liegt daran, dass die Seite als HTML+CSS+JS angezeigt wird und Vue in HTML+CSS+JS gepackt werden muss, um zu dem zu werden, was wir sehen können.
Während des Verpackungsprozesses wurde die Variable von item.src herausgenommen und in /image/icon.svg umgewandelt. Die Adresse wurde als statische Ressource behandelt. Die lokale Adresse 127.0.0.1, als wir sie ausführten, war jedoch nicht 127.0. 0.1 /image/icon. SVG-Ressourcen können nicht verwendet werden
über die Methode require
<image :src="require(item.src)"/>Diese erforderliche Methode lädt die Adresse dynamisch
Zu diesem Zeitpunkt meldete der Browser jedoch den Fehler, dass er dieses Modul nicht finden konnte: „1-icon.svg“
Da require Ressourcen und Modellmodule importieren kann, kann Ihr require nicht erkennen, ob es sich um ein Paket oder eine Ressource handelt.
Endgültige Lösung:
Wir müssen nur eine bestimmte Adresse davor hinzufügen, damit require erkennt, dass es sich um eine Ressource und nicht um ein Paket handelt.
<img :src="require('./images/'+item.icon)" alt=""/>