Vue3動態(tài)引入圖片全過程
更新時間：2025年08月30日 14:08:53 作者：水果攤見
在Vite項(xiàng)目中,動態(tài)引入background-image需使用import或newURL方法,避免打包路徑問題,靜態(tài)資源存放在src/assets,建議使用絕對路徑/開頭確保正確引用
背景
需要動態(tài)引入background-image，如果在css中靜態(tài)寫入的話沒有問題，但是使用變量動態(tài)引入，由于vite打包后，無法找到路徑。
靜態(tài)資源
項(xiàng)目中需要使用的圖片等靜態(tài)資源一般存放在src/assets文件夾下。
background-image使用url方式引入，如果動態(tài)引入的話需要使用import、new URL(url, import.meta.url)這樣的方式。
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
而在html中使用動態(tài)style引入
<div style={{ backgroundImage: `url(${getAssetsFile('Image.png')})` }}></div>
即可實(shí)現(xiàn)資源的動態(tài)引入。
使用絕對路徑
這里也可以使用絕對路徑，以 / 作為開頭，就是絕對路徑。
例如：資源在src/assets/images下：
new URL(`/src/assets/images/${url}`, import.meta.url).href;
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中動態(tài)添加style樣式的幾種寫法總結(jié)
這篇文章主要介紹了vue中動態(tài)添加style樣式的幾種寫法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析(兩種)
本文給大家?guī)韛ue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析，根據(jù)各自需求給大家?guī)砹藘煞N原因分析，大家可以參考下2018-09-09
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios請求，對Vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了詳解VUE中常用的幾種import（模塊、文件）引入方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2023-05-05
Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀
這篇文章主要為大家介紹了Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示簡單代碼
今天在項(xiàng)目中有一個功能是要求顯示北京的實(shí)時時間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示的相關(guān)資料,需要的朋友可以參考下2024-01-01