1. 程式人生 > >vue style 標籤中 background-image 空白不顯示

vue style 標籤中 background-image 空白不顯示

通常我們使用 background-image 標籤時, url 的值無非就以下幾種:
![](https://img-blog.csdn.net/20181012193137547?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZWVrTXJ6eko=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
先說上面的第三種:

@/assets/media/hd.jpg

會提示檔案不存在,編譯報錯

/assets/media/hd.jpg

不會提示報錯,但是實際在開發頁面不會顯示圖片。(對,其實就是載入不到圖片吧。。。具體原因未知)

…/…/…/assets/media/hd.jpg

這種是我目前使用的,雖然相對路徑在書寫上比較麻煩,但是可以正確顯示。也不需要像其他人部落格裡介紹的那樣,通過data 設定一個 url 值,再通過:style="xxxx"template 標籤上寫動態的內斂樣式。

/static/media/hd.jpg

推薦這種, 靜態資源一般都需要存放到 static 目錄下。