1. 程式人生 > >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》通過行內樣式將樣式引入

<div class="note" :style ="note"></div>

就這樣就能完美的解決這個問題了。