Hintergrundbild in Vue festlegen

Jetzt werde ich Ihnen eine Methode zum Festlegen von Hintergrundbildern in Vue-Projekten vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich sein wird.

Bei der Vue-Projektentwicklung fügen wir der Seite häufig Hintergrundbilder hinzu. Nachdem wir jedoch das Hintergrundbild zum Stil hinzugefügt, es kompiliert und gepackt und auf dem Server konfiguriert haben, treten Probleme bei der Pfadauflösung auf. Das Bild kann nicht korrekt angezeigt werden, wie im folgenden CSS-Stil gezeigt:

background:url("../../assets/head.jpg");

Zu diesem Zeitpunkt müssen wir über die Verwendung anderer Methoden nachdenken, um dieses Problem effektiver zu lösen:

1. Definieren Sie es in den Daten wie folgt:

 export default {
 name: 'productdetailspage',
 data() {
  return {
   note: {
   backgroundImage: "url(" + require("../../assets/save.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "25px auto",
   marginTop: "5px",
   },
  }
 },

2. Führen Sie den Stil durch Inline-Stil ein

<p class="note" :style ="note"></p>

Das ist die perfekte Lösung für dieses Problem.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Durch die Implementierung einer HTTP-Anfrage und das Laden der Anzeige in Vue2.0

Wie man die Module „process“ und „child_process“ lernt node (Detailliertes Tutorial)

Methode der domänenübergreifenden Anfrage über jQuery+JSONP (Detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonHintergrundbild in Vue festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!