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