Hintergrund
Wenn wir vue2 + Webpack verwenden, wird das Laden von Bildressourcen wie folgt verwendet:
<img :src="require('@/assets/test.png')" />
Auf diese Weise wird nach dem Packen file-loaderdas Packen der , und Sie können dieses Bild im dist-Ordner sehen (wenn das Bild klein ist, wird es in den Code gepackt und als base64 importiert).
In Vue3 + Vite ist die Verwendung dieser Methode jedoch nicht akzeptabel. In Vite ist keine Anforderung erforderlich, und es wird ein Fehler gemeldet. Lösung
Im offiziellen Dokument werden zwei Lösungen erwähnt, die ich heute überprüfen werde.
Geben Sie Ressourcen als URLs ein
import chatHealth from '@/assets/chat-health.png'
<img :src="chatHealth" alt="" />
Es ist ersichtlich, dass der Ordner dist dieses Bild nicht ausgibt, da es klein und als Base64 gepackt ist.
Als nächstes machte ich zum Testen ein großes Foto und stellte fest, dass es tatsächlich verpackt war.
Diese Methode ist also protestwirksam.
neue URL (URL, import.meta.url)
Die zweite Methode ist:
<img :src="getImgUrl('chat-health.png')" alt="" />
const getImgUrl = (name: string) => {
return new URL('../../../../../assets/' + name, import.meta.url).href
}
Mit dieser Methode können Bilder geladen werden, wenn sie lokal ausgeführt werden.
Aber als ich es an die reale Umgebung (Test/Online) schickte, stellte ich fest, dass die Datei nicht gefunden werden konnte. Ich schaute mir das Verzeichnis an, das auf: zeigte, aber
dieser Pfad ist falsch, und dann schaute ich mir die gepackte Datei an
und fand das Die gepackte Datei hatte dieses Bild nicht, ich verstehe nicht ganz, wo hier das Problem liegt?
Es scheint, dass Vite dieses Bild nicht geladen hat, sodass die gepackte Datei nicht angezeigt werden kann, nicht weil das Bild klein ist. Ich habe zu einem größeren Bild gewechselt und es gibt immer noch keinen Abstand, ich weiß nicht, ob ich etwas getan habe falsch.
Ende
Beim Vergleich dieser beiden Lösungen habe ich nur die erste erfolgreich ausprobiert und die zweite kann mich gerne korrigieren, wenn ich etwas falsch gemacht habe