vue2.x background:url()的踩坑記錄
background:url()的踩坑記錄
開發(fā)模式下vue中background: url(‘../../assets/img/xxxxx’)直接寫在行間樣式不生效，即不能直接在標(biāo)簽中style屬性中寫，
必須寫在非行間樣式才會(huì)生效。
如果要寫在行間樣式中，需要對(duì)資源進(jìn)行導(dǎo)入，比如ES規(guī)范的import或者CommomJS規(guī)范的require
backgroundImage路徑問題
項(xiàng)目中圖片都放在src/img文件夾，img和background-image引用都用相對(duì)路徑，即../../這種形式
在打包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屬性非常常見，有很多時(shí)候需要使用內(nèi)聯(lián)樣式來綁定此屬性，但是在vue-cli項(xiàng)目中，如果如下面代碼填寫路徑會(huì)找不到圖片
使用require()方法，require()是node.js方法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用ElementPlus的Table啥都好，就是沒有可編輯表格，所以這篇文章就來和大家分享一下Vue實(shí)現(xiàn)極致舒適的可編輯表格的方法，希望對(duì)大家有所幫助2023-06-06
這篇文章主要介紹了Vue操作DOM解決顯示位置問題,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
本篇文章主要介紹了詳解Nuxt.js Vue服務(wù)端渲染摸索，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
詳解Vue SPA項(xiàng)目?jī)?yōu)化小記
這篇文章主要介紹了詳解Vue SPA項(xiàng)目?jī)?yōu)化小記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面
這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解基于vue-router的動(dòng)態(tài)權(quán)限控制實(shí)現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動(dòng)態(tài)權(quán)限實(shí)現(xiàn)方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序
Vue3 在經(jīng)過多個(gè)開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09
Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了Vue3封裝登錄功能的兩種實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03