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)文章
解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題
這篇文章主要介紹了解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀取（屬性中的getter和setter方法） 實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡(jiǎn)單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01
Vue+Spring Boot簡(jiǎn)單用戶登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡(jiǎn)單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
vue-element-admin后臺(tái)管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了uni-app?開發(fā)微信小程序定位,通過使用onLocationChange方法持續(xù)監(jiān)聽地址，根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度，需要的朋友可以參考下2022-04-04