vue.jsで背景画像を変更する方法

vue.js で背景画像を変更する方法: インライン スタイルを通じてスタイルを導入し、[require()] メソッドを使用します。コードは [

< /div>] .

このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

vue.js で背景画像を変更する方法:

Vue プロジェクト開発では、ページに背景画像を追加することがよくありますが、背景画像をスタイルに追加し、コンパイルしてパッケージ化し、サーバー上で設定すると、パスの解決により画像が正しくありません。次の CSS スタイルで表示されます:

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

現時点では、他の方法の使用を検討する必要があります。ノードは、この問題を解決するためのより効果的な方法を提供します。方法は次のとおりです。

はデータ内で次のように定義されています。

  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'
      }
    }
  }

use require() メソッド、require() は、node.js メソッドです。

インライン スタイルを通じてスタイルを導入します:

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

#関連する無料学習の推奨事項: JavaScript(ビデオ)

以上がvue.jsで背景画像を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。