vue背景圖片路徑問題及解決
更新時(shí)間：2022年07月27日 08:32:08 作者：碼林鼠
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue背景圖片路徑
共三種情況：
<div class="about" :style="{backgroundImage:'url('+pic+')'}">
<div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;border-radius: 50%;" :style="{backgroundImage:'url('+item.fromhead+')'}"></div>
pic:require('@/assets/bg.jpg')<div class="about" :style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}"><img :src="require('@/assets/bg.jpg')">css里面不能用require
上面是body的背景圖片
vue避坑之背景圖片路徑的添加
一般來說咱們添加背景圖片，直接使用語句
background: url();
然后添加路徑就好，而vue新建一個(gè)項(xiàng)目之后，會(huì)有一個(gè)assets文件夾，里面放著原始vue logo，我一開始誤以為所有的圖片都是放在aasets文件夾下，然后使用命令：
background: url("../aasets/bg2.jpg");添加路徑，多次嘗試，運(yùn)行發(fā)現(xiàn)總是無法實(shí)現(xiàn)加載圖片，然后我新建了個(gè)和src同級(jí)的文件夾static,將圖片放進(jìn)去，再次添加路徑就可以了！
background: url("../static/bg2.jpg");后來百度了下static和assets的區(qū)別：
使用assets下面的資源，在js中使用的話，路徑要經(jīng)過webpack中的file-loader編譯，路徑不能直接寫。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家分享介紹了關(guān)于動(dòng)態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細(xì)，通過這個(gè)教程大家可以很方便的實(shí)現(xiàn)動(dòng)態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決
這篇文章主要介紹了webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本文主要介紹了Vue新一代狀態(tài)管理工具Pinia的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue利用Web?Speech?API實(shí)現(xiàn)文字朗讀功能
在?Vue?頁面中實(shí)現(xiàn)文字朗讀（Text-to-Speech,TTS）可以通過瀏覽器的?Web?Speech?API?實(shí)現(xiàn),下面小編就來和大家簡單講講具體實(shí)現(xiàn)步驟吧2025-02-02
Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue select 獲取value和lable操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10