Probleme im Zusammenhang mit der Verwendung absoluter Pfadreferenzen durch CLI in Vue

Dieser Artikel stellt Ihnen hauptsächlich die Lösung des Problems der Verwendung absoluter Pfade zum Referenzieren von Bildern in Vue CLI vor Brauchen Sie es? Werfen wir einen Blick mit dem untenstehenden Editor.

Vorwort

Was ist Vue? Es ist ein progressives Framework zum Erstellen von Benutzeroberflächen (Erklärung auf der offiziellen Website). Die einfache Antwort lautet: Diese Konzepte können nur von einem selbst gesehen und verstanden werden, aber es gibt nicht viele Erklärungen. Die offizielle Vue-Dokumentation ist sehr umfassend.

Vue ist in den letzten zwei Jahren ein beliebtes Front-End-Framework (progressives Framework) und bietet Ihnen eine detaillierte Einführung in das Problem der Verwendung absoluter Pfade zum Referenzieren von Bildern in Vue CLI Ihre Referenz und Ihr Studium. Es gibt nicht viel zu sagen, schauen wir uns das gemeinsam an.

Text:

Die Verwendung absoluter Pfade auf der Seite kann den

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

rrree

-Stil einführen, indem require() in js verwendet wird Es scheint, dass im Inneren keine absoluten Pfade verwendet werden können, es sei denn, Sie stellen alle Bildressourcen statisch ein und können sie dann wie folgt referenzieren:

<img :src="src">

Nach dem Einfügen in den statischen Pfad kopiert Webpack die Ressourcen jedoch nur nach Das Release-Verzeichnis und nicht das Release-Verzeichnis sind für Base64 optimiert.

Um beide Aspekte zu berücksichtigen, können die Bildressourcen optimiert werden. Daher ist es immer noch nicht geeignet, die Bildressourcen statisch zu platzieren. Wenn Sie jedoch Stile in das Style-Tag der Vue-Seite schreiben, Wenn das Verzeichnis tiefer geht, kann der Referenzpfad lauten:

background: url("/static/images/banner.jpg") no-repeat;

Es gibt eine Methode, die einiges an Ärger zu ersparen scheint:

Legen Sie die Stildateien in den Stilordner und verwenden Sie relative Pfade für den Stil Bildressourcen und verwenden Sie dann das src-Attribut, um den Stil im Stil-Tag einzuführen, damit Sie nicht zu viele Ebenen zurückgeben können in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So fügen Sie einem Objekt in js ein Array hinzu

So erstellen Sie einen vollständigen Projektprozess mit gulp

Mit Axios Dateien in Vue hochladen

Wie man Bilder in JavaScript vergrößert

Wie um zwischen Stilen in Vue zu wechseln

Das obige ist der detaillierte Inhalt vonProbleme im Zusammenhang mit der Verwendung absoluter Pfadreferenzen durch CLI in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!