vue2.x background:url()的踩坑記錄
background:url()的踩坑記錄
開(kāi)發(fā)模式下vue中background: url(‘../../assets/img/xxxxx’)直接寫(xiě)在行間樣式不生效，即不能直接在標(biāo)簽中style屬性中寫(xiě)，
必須寫(xiě)在非行間樣式才會(huì)生效。
如果要寫(xiě)在行間樣式中，需要對(duì)資源進(jìn)行導(dǎo)入，比如ES規(guī)范的import或者CommomJS規(guī)范的require
backgroundImage路徑問(wèn)題
項(xiàng)目中圖片都放在src/img文件夾，img和background-image引用都用相對(duì)路徑，即../../這種形式
在打包build的設(shè)置路徑assetsPublicPath: ‘./‘，然后那些沒(méi)有轉(zhuǎn)成base64的背景圖都失效了，，路徑。
處理方法
使用require引入圖片
img標(biāo)簽
<img :src="require('assets/img/header/search.png')">背景圖
<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>
<span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">
</span>也可以下面這種方式去寫(xiě)：
在前端開(kāi)發(fā)中，background-image屬性非常常見(jiàn)，有很多時(shí)候需要使用內(nèi)聯(lián)樣式來(lái)綁定此屬性，但是在vue-cli項(xiàng)目中，如果如下面代碼填寫(xiě)路徑會(huì)找不到圖片
使用require()方法，require()是node.js方法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ES6 Proxy實(shí)現(xiàn)Vue的變化檢測(cè)問(wèn)題
Vue3.0將采用ES6 Proxy的形式重新實(shí)現(xiàn)Vue的變化檢測(cè)，在官方還沒(méi)給出新方法之前，我們先實(shí)現(xiàn)一個(gè)基于Proxy的變化檢測(cè)。感興趣的朋友跟隨小編一起看看吧2019-06-06
從Vuex中取出數(shù)組賦值給新的數(shù)組,新數(shù)組push時(shí)報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇從Vuex中取出數(shù)組賦值給新的數(shù)組,新數(shù)組push時(shí)報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue之ElementUI Form表單校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
基于node+vue實(shí)現(xiàn)簡(jiǎn)單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時(shí)通信，感覺(jué)非常的強(qiáng)大，這里我用node啟動(dòng)了一個(gè)服務(wù)進(jìn)行websocket鏈接，然后再vue的view里面進(jìn)行了鏈接，進(jìn)行通信，廢話不多說(shuō)，直接上代碼吧2020-02-02
Proxy是ES6引入的一個(gè)新特性，它允許你創(chuàng)建一個(gè)代理對(duì)象，用于攔截對(duì)目標(biāo)對(duì)象的訪問(wèn)，但用了這么久的vue3，你真的懂Proxy嗎，本文就來(lái)和大家深入聊聊Proxy吧2023-06-06
這篇文章主要介紹了vue中keep-alive的用法及問(wèn)題描述,本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值，需要的朋友可以參考下2018-05-05
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue使用element-ui按需引入時(shí)踩過(guò)的那些坑
Element-UI是基于vue實(shí)現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫(kù),提供了豐富的PC端組件,減少用戶對(duì)常用組件的封裝,降低了開(kāi)發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時(shí)踩過(guò)的那些坑,需要的朋友可以參考下2022-05-05
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08