Vueで背景画像を設定する

亚连
リリース: 2018-06-05 16:55:54
オリジナル
4475 人が閲覧しました

ここで、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. インラインスタイルによるスタイルの導入

<p class="note" :style ="note"></p>
ログイン後にコピー
は、この問題を完全に解決できます。

上記は私があなたのためにまとめたものです。

関連記事:

Vue2.0でhttpリクエストを実装し、表示を読み込む方法

nodeのprocessモジュールとchild_processモジュールを学ぶ方法(詳細なチュートリアル)

jQueryのクロスドメインリクエストメソッドを通して+JSONP (詳細なチュートリアル)

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

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート