在Vue中設定背景圖片

下面我就為大家分享一篇Vue專案中設定背景圖片方法，具有很好的參考價值，希望對大家有幫助。

在Vue專案開發中我們經常要為頁面中新增背景圖片，可是當我們在樣式中新增了背景圖片後，編譯打包後，配置到伺服器上時，由於路徑解析的問題，圖片並不能夠正確的顯示出來，如下CSS樣式：

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

這時候我們就要考慮使用其他的方式了，node中提供了一種比較有效的方式來解決這個問題：

1、在data中定義如下：

 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請求以及loading展示

如何學習node中process以及child_process模組（詳細教學）

透過jQuery JSONP中跨域請求的方法（詳細教學）

#

以上是在Vue中設定背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！