vue style屬性設(shè)置背景圖片的相對路徑無效的解決
更新時間：2023年10月13日 16:50:13 作者：南為愛編程
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對路徑無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue style設(shè)置背景圖片的相對路徑無效
<div style="background-image: url(./assets/bj.jpeg);"></div>
以上的代碼，在style屬性中使用了相對路徑，在頁面元素上的內(nèi)容d也沒有問題。
但是，背景圖片依舊沒有出來，甚至報錯。
很明顯是路徑有問題，當(dāng)然了編寫的路徑肯定是沒問題，但是編譯后的文件可就不一定了。
那我們想在style屬性中設(shè)置背景圖片怎么辦？
解決一、 使用絕對路徑
<div style="background-image: url(/src/assets/bj.jpeg);"></div>
解決二、使用Import + 動態(tài)style
<template>
<div :style="{backgroundImage: 'url('+ bj +')'}"></div>
</template><script setup> import bj from './assets/bj.jpeg'; console.log(bj); </script>
<style>
div {
width: 100%;
min-height: 500px;
background-color: aqua;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>本質(zhì)上，它使用的依然是絕對路徑：
樣式中@設(shè)置背景照片無效的原因
1.在項目中，@是我們在vue.config.js中設(shè)置的一個路徑別名，指定src跟目錄，很方便查詢文件
2.但是如果在樣式中使用@別名時，如果無效，需要在@前面加一個~符合hi可以解決
3.一個單文件組件中，樣式如果只是在當(dāng)前組件使用，則可以寫到標(biāo)注了scoped的區(qū)域 <style lang="scss"></style>,如果不加scoped，則會變成全局，而不是當(dāng)前組件
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?跨域配置devServer的參數(shù)和設(shè)置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue服務(wù)端渲染的實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了使用vue-i18n?入口文件配置控制臺報警問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了基于Vue.js的移動組件庫cube-ui，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)
要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個屬性傳遞給組件,在組件內(nèi)部監(jiān)聽這個屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧2024-03-03
Pinia入門學(xué)習(xí)之實(shí)現(xiàn)簡單的用戶狀態(tài)管理
Vue3雖然相對于Vue2很多東西都變了,但是核心的東西還是沒有變,比如說狀態(tài)管理、路由等,再Vue3中尤大神推薦我們使用pinia來實(shí)現(xiàn)狀態(tài)管理,他也說pinia就是Vuex的新版本,這篇文章主要給大家介紹了關(guān)于Pinia入門學(xué)習(xí)之實(shí)現(xiàn)簡單的用戶狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue調(diào)用高德地圖實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
electron實(shí)現(xiàn)靜默打印的示例代碼
這篇文章主要介紹了electron實(shí)現(xiàn)靜默打印的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在Vue3中,onUnmounted是一個生命周期鉤子,它會在組件實(shí)例被卸載（unmounted）和銷毀之前被調(diào)用,本文給大家介紹vue3中onUnmounted使用詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實(shí)現(xiàn)代碼的復(fù)用和可維護(hù)性。通過定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實(shí)現(xiàn)更靈活的代碼組織方式。同時，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開發(fā)的實(shí)際場景2023-05-05