ここで、Vue プロジェクトで背景画像を設定する方法を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。
Vue プロジェクトの開発では、ページに背景画像を追加することがよくありますが、背景画像をスタイルに追加し、コンパイルしてパッケージ化し、サーバー上で設定すると、パス解決の問題により画像が正しくありません。 . が次の CSS スタイルで表示されます:
background:url("../../assets/head.jpg");
現時点では、この問題を解決するためのより効果的な方法をノードで使用することを検討する必要があります:
1. データ内で次のように定義します。
export default {
name: 'productdetailspage',
data() {
return {
note: {
backgroundImage: "url(" + require("../../assets/save.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "25px auto",
marginTop: "5px",
},
}
},
2. インラインスタイルによるスタイルの導入 上記は私があなたのためにまとめたものです。 関連記事: 以上がVueで背景画像を設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<p class="note" :style ="note"></p>