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