So ändern Sie das Hintergrundbild in vue.js

So ändern Sie das Hintergrundbild in vue.js: Führen Sie den Stil über den Inline-Stil ein, verwenden Sie die Methode [require()], der Code lautet [<div :style ="leftBg"></div>] .

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js So ändern Sie das Hintergrundbild:

In der Vue-Projektentwicklung müssen wir der Seite oft Hintergrundbilder hinzufügen, aber wenn wir hinzufügen es im Stil Nachdem Sie ein Hintergrundbild hinzugefügt, kompiliert und gepackt und auf dem Server konfiguriert haben, kann das Bild aufgrund von Pfadanalyseproblemen nicht korrekt angezeigt werden, wie im folgenden CSS-Stil gezeigt:

background: url("../.. /assets/left-bg.jpg");background:url("../../assets/left-bg.jpg");

这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题，方法如下：

在data中定义如下：

  data() {
    return {
      leftBg: {
        background: "#235d8b url(" + require("./assets/left-bg.png") + ") no-repeat scroll 0 bottom",
      },
      topBg: {
        background: "#235d8b url(" + require("./assets/top-bg.png") + ") no-repeat scroll right 0",
        height: '80px'
      }
    }
  }

其中使用require()方法，require()是node.js方法。

通过行内样式将样式引入：

<div :style ="leftBg"></div>

Zu diesem Zeitpunkt müssen wir über die Verwendung anderer Methoden nachdenken. Die Methode ist wie folgt:

In Die Definition in Daten lautet wie folgt: rrreeeDie Methode require() wird verwendet und require() ist die Methode von node.js. ( Video)

Das obige ist der detaillierte Inhalt vonSo ändern Sie das Hintergrundbild in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!