So integrieren Sie Bilder eleganter in Vue-Seiten

So integrieren Sie Bilder eleganter in Vue-Seiten

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.

Fehlerdemonstration

Vielleicht 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 berechnete

Um 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 umschalten

Das 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 CSS

Dies 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.

Zusammenfassen

Dies 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:
  • Detaillierte Erklärung verschiedener Möglichkeiten zum Einführen von Bildpfaden in Vue.js
  • Die drei Codebeispiele für den Bildimport von Vue
  • So fügen Sie img-Bilder in Vue-Seiten ein

<<:  So sorgen Sie für eine hohe Konsistenz von CSS-Unterelementen mit übergeordneten Elementen

>>:  Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen

Artikel empfehlen

Native JS-Kapselung, nahtlose Karussellfunktion

Natives js-gekapseltes nahtloses Karussell-Plug-I...

Verwenden Sie das Rem-Layout, um eine adaptive

Ich habe bereits einen Artikel über mobile Anpass...

jQuery ermöglicht nahtloses Scrollen von Tabellen

In diesem Artikelbeispiel wird der spezifische Co...

isPrototypeOf-Funktion in JavaScript

Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...

So erstellen Sie schnell zig Millionen Testdaten in MySQL

Bemerkung: Die Datenmenge in diesem Artikel beträ...

Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card

Heute ist der 618. und alle großen Einkaufszentre...

Vue + node realisiert Audioaufzeichnungs- und -wiedergabefunktion

Ergebnis: Der Hauptteil besteht darin, die Codelo...

Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten

1. Verwenden Sie CSS-Sprites. Der Vorteil besteht ...

Einführung in das Methodenattribut des Formularformulars in HTML

1 Methode ist eine Eigenschaft, die angibt, wie Da...

Schnelle Lösung zum Vergessen des MySQL8-Passworts

Vorwort Wenn wir das MySQL-Datenbankkennwort verg...

vue-cli4.5.x erstellt schnell ein Projekt

1. Installieren Sie vue-cli npm ich @vue/cli -g 2...