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也沒有問題。
但是，背景圖片依舊沒有出來，甚至報錯。
很明顯是路徑有問題，當然了編寫的路徑肯定是沒問題，但是編譯后的文件可就不一定了。
那我們想在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.一個單文件組件中，樣式如果只是在當前組件使用，則可以寫到標注了scoped的區(qū)域 <style lang="scss"></style>,如果不加scoped，則會變成全局，而不是當前組件
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解
這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了VUE 動態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應(yīng)用場景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了element 表格嵌套表單驗證指定行的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
本文主要介紹了Vite3遷移Webpack5的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue arco.design錨點Anchor使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
Element 默認勾選表格 toggleRowSelection的實現(xiàn)
這篇文章主要介紹了Element 默認勾選表格 toggleRowSelection的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
關(guān)于vue中watch檢測到不到對象屬性的變化的解決方法
本篇文章主要介紹了關(guān)于vue中watch檢測到不到對象屬性的變化的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02