Wenn wir Vue-Projekte schreiben, werden wir auf jeden Fall verschiedene Bilder verwenden. Wie können wir also Bildressourcen besser nutzen? Hier werde ich über die Methode sprechen, die ich häufig verwende. FehlerdemonstrationVielleicht schreibst du dies oft in deinen Code <Vorlage> <img :src="Quelle"> </Vorlage> <Skript> Standard exportieren{ Daten(){ zurückkehren { Quelle: erforderlich('xxx.jpg') } } } </Skript> In Webpack verarbeitet require automatisch Ressourcen, was in Ordnung ist. Wenn Sie es jedoch in die Daten von vue einfügen, durchläuft vue die Daten und fügt src Reaktionsfähigkeit hinzu. Aber meistens muss diese src nicht reagieren, was zu Leistungseinbußen führt. Durch berechneteUm die obige Fehlerlösung zu beheben, ist eine der Lösungen: berechnet <Vorlage> <img :src="Quelle"> </Vorlage> <Skript> const src = erfordern('xxx.jpg') Standard exportieren{ berechnet:{ quelle(){ Rückgabequelle } } } </Skript> Der Rechner selbst verfügt über einen Cache, der Leistungseinbußen reduzieren kann. Wenn sich das Bild nicht ändert, importieren Sie es direkt<Vorlage> <img :src="Quelle"> </Vorlage> oder <Vorlage> <div Klasse="bg"></div> </Vorlage> <Stil> .bg{ Hintergrund:URL("xxx.jpg") } </Stil> Wenn sich unser Bild nicht ändert, können wir es direkt importieren, ohne eine Variable zuzuweisen. In ähnlicher Weise können Sie Bilder auch dynamisch anzeigen, indem Sie die Klassennamen wechseln, was auch besser ist. <Vorlage> <div: Klasse = "Flagge? 'bg1':'bg2'"></div> </Vorlage> <Skript> Standard exportieren{ Daten(){ zurückkehren { Flagge: wahr } } } </Skript> <Stil> .bg1{ Hintergrund: URL ("xxx1.jpg") } .bg2{ Hintergrund: URL ("xxx2.jpg") } </Stil> Bilder über CSS-Variablen umschaltenDas ist nur eine Idee, die mir gerade eingefallen ist. Theoretisch können CSS-Variablen alles speichern. Können sie also Bildadressen speichern? <Vorlage> <div Klasse="bg"></div> </Vorlage> <Skript> Standard exportieren{ montiert(){ // Die erste Methode, Bildadresse oder Base64 dies.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`) // Die zweite Methode this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`) } } </Skript> <Stil> .bg{ --bg:url('xxx.jpg'); Hintergrundbild: --bg; } </Stil> Mein persönlicher Test war erfolgreich, diese Methode ist auch verfügbar und sie ist besser als die berechnete, schließlich ist die Bedienung von CSS-Variablen kostengünstiger. Bei dieser Methode muss beachtet werden, dass Bilder in CSS im Allgemeinen in URLs geschrieben werden, Sie müssen also eine String-URL (Ihren Inhalt) aneinanderreihen. Zeichnen über CSSDies ist eigentlich ein Exkurs. Manchmal können einige Bilder tatsächlich mit CSS gezeichnet werden. Zum Beispiel das Dreieck im Bild unten. Wenn Sie auf Baidu suchen, finden Sie verschiedene CSS-Dreiecksgeneratoren. Diese Art von Grafik lässt sich besser mit CSS zeichnen als mit einem Bild. Zusammenfassend lässt sich sagen, dass Sie keine Bilder in die Daten von Vue einführen sollten und versuchen sollten, CSS zu verwenden. ZusammenfassenDies ist das Ende dieses Artikels darüber, wie Sie Bilder eleganter auf Vue-Seiten einfügen können. Weitere relevante Inhalte dazu, wie Sie Bilder eleganter auf Vue einfügen können, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: So sorgen Sie für eine hohe Konsistenz von CSS-Unterelementen mit übergeordneten Elementen
>>: Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
Natives js-gekapseltes nahtloses Karussell-Plug-I...
Ich habe bereits einen Artikel über mobile Anpass...
In diesem Artikelbeispiel wird der spezifische Co...
Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...
1. Konfigurieren Sie den Docker-Remoteverbindungs...
Inhaltsverzeichnis Vorwort Rendern Beispielcode Z...
Einführung Wenn Sie mit der Verwendung von JDBC z...
Bemerkung: Die Datenmenge in diesem Artikel beträ...
Heute ist der 618. und alle großen Einkaufszentre...
Ergebnis: Der Hauptteil besteht darin, die Codelo...
1. Verwenden Sie CSS-Sprites. Der Vorteil besteht ...
1. Installation 1. Herunterladen Gehen Sie zur of...
1 Methode ist eine Eigenschaft, die angibt, wie Da...
Vorwort Wenn wir das MySQL-Datenbankkennwort verg...
1. Installieren Sie vue-cli npm ich @vue/cli -g 2...