Vue專案中設定背景圖片
阿新 • • 發佈:2018-12-31
在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》通過行內樣式將樣式引入
<div class="note" :style ="note"></div>
就這樣就能完美的解決這個問題了。