Vue3動(dòng)態(tài)引入圖片全過程
更新時(shí)間：2025年08月30日 14:08:53 作者：水果攤見
在Vite項(xiàng)目中,動(dòng)態(tài)引入background-image需使用import或newURL方法,避免打包路徑問題,靜態(tài)資源存放在src/assets,建議使用絕對(duì)路徑/開頭確保正確引用
背景
需要?jiǎng)討B(tài)引入background-image，如果在css中靜態(tài)寫入的話沒有問題，但是使用變量動(dòng)態(tài)引入，由于vite打包后，無法找到路徑。
靜態(tài)資源
項(xiàng)目中需要使用的圖片等靜態(tài)資源一般存放在src/assets文件夾下。
background-image使用url方式引入，如果動(dòng)態(tài)引入的話需要使用import、new URL(url, import.meta.url)這樣的方式。
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
而在html中使用動(dòng)態(tài)style引入
<div style={{ backgroundImage: `url(${getAssetsFile('Image.png')})` }}></div>
即可實(shí)現(xiàn)資源的動(dòng)態(tài)引入。
使用絕對(duì)路徑
這里也可以使用絕對(duì)路徑，以 / 作為開頭，就是絕對(duì)路徑。
例如：資源在src/assets/images下：
new URL(`/src/assets/images/${url}`, import.meta.url).href;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue封裝一個(gè)簡(jiǎn)單的div框選時(shí)間的組件的方法
這篇文章主要介紹了vue封裝一個(gè)簡(jiǎn)單的div框選時(shí)間的組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10
vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
我們?cè)谧鰒ue項(xiàng)目時(shí),經(jīng)常會(huì)需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問題講解，詳細(xì)代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
該文章主要介紹了如何在Vue項(xiàng)目中解決IE瀏覽器的兼容性問題,包括解決IE不兼容axios的Promise對(duì)象、ES6語法以及polyfill的使用方法,通過配置babel-polyfill、es6-promise和轉(zhuǎn)ES5語法,解決了在IE瀏覽器中常見的兼容性問題,需要的朋友可以參考下2025-01-01
Vue axios庫(kù)避免重復(fù)發(fā)送請(qǐng)求的示例介紹
Axios是一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫(kù)之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,它的核心庫(kù)只關(guān)注視圖層,易于上手,也便于與其他庫(kù)或已有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式
這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10