So verarbeiten Sie lokal dynamisch geladene Bilder in Vue

Finden Sie das Problem

Heute bin ich auf ein Problem beim Einfügen lokaler Bilder in Vue-Dateien gestoßen und habe deshalb diesen Artikel geschrieben.

Normalerweise wird unser img-Tag in HTML so geschrieben:

<img src="../images/demo.png">

Diese Schreibmethode kann Bilder nur unter relativen Pfaden referenzieren. Absolute Pfade können nicht verwendet werden. Wenn Sie einen absoluten Pfad verwenden, werden solche Ressourcen direkt kopiert, ohne von Webpack verarbeitet zu werden.

Wenn src eine Variable ist, definieren wir normalerweise eine Variable src in Daten für die dynamische Bindung.

<img :src="Quelle">

//Definieren Sie die Variable src in data
Daten() {
  zurückkehren {
    Quelle: '../images/demo.png'
   }
}

Zu diesem Zeitpunkt werden Sie jedoch feststellen, dass das Bild nicht geladen und nicht angezeigt wird. Durch Überprüfen werden Sie feststellen, dass die Adresse dieses Bildes ../images/demo.png lautet. Dies bedeutet, dass der durch v-bind gebundene relative Pfad nicht vom Dateilader von webpack verarbeitet wird und nur ein einfacher Textaustausch durchgeführt wird.

Was soll ich dann tun?

Problemumgehung

1. Konvertieren Sie das Bild in das Base64-Format

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

Dies kann für kleinere Bilder wie Symbole erfolgen, die im Allgemeinen weniger als 10 KB groß sind.

2. Verwenden Sie **Import**, um Bilder einzuführen

<img :src="Quelle">

//Verwenden Sie Import, um img aus „../images/demo.png“ zu importieren.

//Definieren Sie die Variable src in data
Daten() {
  zurückkehren {
    Quelle: img
   }
}

3. Verwenden Sie **require** zum dynamischen Laden

<img :src="Quelle">

//Definieren Sie die Variable src in data
Daten() {
  zurückkehren {
    Quelle: erforderlich('../images/demo.png')
  }
}

4. Importieren Sie **publicPath** und fügen Sie es in den Pfad ein, um dynamische Änderungen des importierten Pfads zu realisieren

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// Nach der Kompilierung:
<img src="/foo/images/demo.jpg" alt="">
<Skript>
Exportstandard: {
    Daten(){
        zurückkehren {
          öffentlicher Pfad: process.env.BASE_URL,
        }
    },
}
</Skript>

Konfigurieren Sie den publicPath-Pfad in vue.config.js:

//vue.config.js
modul.exporte = {
    öffentlicher Pfad:'/foo/',
    ...
}

abschließend

Statische Ressourcen können auf zwei Arten verarbeitet werden:

• In JavaScript importiert oder über den relativen Pfad in der Vorlage/CSS referenziert. Solche Referenzen werden von Webpack verarbeitet.
• Im öffentlichen Verzeichnis abgelegt oder über einen absoluten Pfad referenziert. Solche Ressourcen werden direkt kopiert, ohne von Webpack verarbeitet zu werden.

Prinzip

Importieren von einem relativen Pfad

Wenn Sie in einer JavaScript-, CSS- oder *.vue-Datei mit einem relativen Pfad (muss mit . beginnen) auf eine statische Ressource verweisen, wird die Ressource in das Abhängigkeitsdiagramm von Webpack aufgenommen.

Während des Kompilierungsprozesses werden alle Ressourcen-URLs wie <img src="...">, background: url(...) und CSS @import als Modulabhängigkeit aufgelöst.

Bei Verwendung eines absoluten Pfads liest der Pfad die Ressourcen im öffentlichen Ordner. Alle im öffentlichen Ordner abgelegten statischen Ressourcen werden einfach in das kompilierte Verzeichnis kopiert, ohne dass eine spezielle Verarbeitung durch Webpack erforderlich ist.

Wenn Ihre Anwendung im Stammpfad eines Domänennamens, wie z. B. http://www.abc.com/, bereitgestellt wird, kann diese Importmethode normal angezeigt werden. Wenn Ihre Anwendung jedoch nicht im Stammpfad des Domänennamens bereitgestellt wird, müssen Sie das Präfix „publicPath“ für Ihre URL konfigurieren. „publicPath“ ist die Basis-URL beim Bereitstellen des Anwendungspakets, die in vue.config.js konfiguriert werden muss.

Erweiterungen

Über Vue File-Loader vs. URL-Loader

Wenn wir Bilder in die Seite einfügen möchten (einschließlich der Quelle des Bilds und der URL des Hintergrunds). Wenn wir auf Basis von webpack entwickeln, treten beim Einfügen von Bildern einige Probleme auf.

Eines davon ist das Problem des Referenzpfades. Nehmen wir als Beispiel den Hintergrundstil. Wir verwenden die URL, um das Hintergrundbild einzuführen. Wir alle wissen, dass Webpack letztendlich jedes Modul in eine Datei packt. Daher ist der URL-Pfad in unserem Stil relativ zur HTML-Einstiegsseite und nicht relativ zum Pfad, in dem sich die ursprüngliche CSS-Datei befindet. Dies führt dazu, dass der Bildimport fehlschlägt. Dieses Problem wird durch die Verwendung eines Dateiladers gelöst, der die URL-Einführung im Projekt analysieren (nicht auf CSS beschränkt), das Bild gemäß unserer Konfiguration in den entsprechenden Pfad kopieren und dann den Referenzpfad der gepackten Datei gemäß unserer Konfiguration ändern kann, um auf die richtige Datei zu verweisen.

Darüber hinaus werden bei vielen Bildern viele HTTP-Anfragen gesendet, was die Seitenleistung beeinträchtigt. Dieses Problem kann durch einen URL-Loader gelöst werden. Der URL-Loader kodiert das importierte Bild und generiert eine Daten-URL. Dies entspricht der Übersetzung der Bilddaten in eine Zeichenfolge. Anschließend packen Sie diese Zeichenfolge in eine Datei und brauchen diese Datei abschließend nur noch zu importieren, um auf das Bild zuzugreifen. Wenn das Bild groß ist, beeinträchtigt die Kodierung natürlich die Leistung. Daher stellt der URL-Loader einen Grenzwertparameter bereit. Dateien, die kleiner als die Byte-Grenze sind, werden in DataURL konvertiert, und Dateien, die größer als die Grenze sind, werden mithilfe des Datei-Loaders kopiert.

**Welche Beziehung besteht zwischen URL-Loader und Datei-Loader? **Kurz gesagt, der URL-Loader kapselt den Datei-Loader. Der URL-Loader ist nicht vom File-Loader abhängig, d. h. wenn Sie den URL-Loader verwenden, müssen Sie nur den URL-Loader installieren, nicht aber den File-Loader, da der URL-Loader über einen integrierten File-Loader verfügt. Aus der obigen Einführung können wir ersehen, dass der URL-Loader in zwei Situationen funktioniert: 1. Wenn die Dateigröße kleiner als der Grenzwertparameter ist, konvertiert der URL-Loader die Datei in DataURL; 2. Wenn die Dateigröße größer als der Grenzwert ist, ruft der URL-Loader den File-Loader zur Verarbeitung auf und die Parameter werden direkt an den File-Loader übergeben. Wir müssen also nur den URL-Loader installieren.

Originallink: https://www.cnblogs.com/weizaiyes/p/7461967.html

Über die Hintergrund-URL bei der Einführung von Bildern

Wenn ich gemäß der obigen Theorie einen relativen Pfad zum Importieren des Bildes verwende, wird webpack diesen verlangen.

Hintergrund: URL('./iphonexs.png') 0 0 keine Wiederholung;

Und tatsächlich, ich sehe, wie sich der Hintergrund der Seite ändert:

Hintergrund: URL (/resources/dist/images/iphonexs.a25bee7.png) 0 0 keine Wiederholung;

Dies ist das Ergebnis der Verarbeitung gemäß der URL-Loader-Konfiguration.

Oder verwenden Sie den dynamischen Stil:

<div
   :style="{'Hintergrund': 'url(' + require('./iphonexs.png') + ') 0 0 keine Wiederholung'}">
</div>

Referenz

cli.vuejs.org/en/guide/html

https://www.jb51.net/article/163170.htm

github.com/vuejs/vue-c…

Zusammenfassen

Dies ist das Ende dieses Artikels über das dynamische Laden lokaler Bilder durch Vue. Weitere relevante Inhalte zum dynamischen Laden lokaler Bilder durch Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!