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