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!