Vue項目中設(shè)置背景圖片方法
更新時間：2018年02月21日 21:03:44 作者：漣動下漁舟
下面小編就為大家分享一篇Vue項目中設(shè)置背景圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片，可是當(dāng)我們在樣式中添加了背景圖片后，編譯打包后，配置到服務(wù)器上時，由于路徑解析的問題，圖片并不能夠正確的顯示出來，如下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、通過行內(nèi)樣式將樣式引入
<div class="note" :style ="note"></div>
就這樣就能完美的解決這個問題了。
以上這篇Vue項目中設(shè)置背景圖片方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件之間的參數(shù)傳遞與方法調(diào)用的實例詳解
這篇文章主要介紹了Vue組件之間的參數(shù)傳遞與方法調(diào)用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Django+Vue跨域環(huán)境配置詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個時刻會自動執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧2023-03-03
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時候,會顯得整個頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue ElementUi同時校驗多個表單(巧用new promise)
這篇文章主要介紹了巧用new promise實現(xiàn)Vue ElementUi同時校驗多個表單功能，實現(xiàn)的方法有很多種，本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下2018-06-06
Vue 中使用虛擬 dom 且根據(jù) diff 算法進(jìn)行新舊 DOM 對比，從而更新真實 dom ，key 是虛擬 DOM 對象的唯一標(biāo)識, 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
使用vue-aplayer插件時出現(xiàn)的問題的解決
這篇文章主要介紹了使用vue-aplayer插件時出現(xiàn)的問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03