Vue3的vite中圖片動態(tài)加載3種方式
更新時間：2023年11月10日 11:16:28 作者：一月清輝
這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的相關(guān)資料,圖片進(jìn)入可視區(qū)域,進(jìn)行動態(tài)加載圖片操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
第一種方式（適用于處理單個鏈接的資源文件）
import homeIcon from '@/assets/images/home/home_icon.png' <img :src="homeIcon" />
第二種方式----- 圖片在src目錄下
vite官網(wǎng)的靜態(tài)資源引入?yún)⒖嫉刂?/a>
new URL() + import.meta.url
const getAssetsFile = (url) => {
return new URL(`../assets/images/${url}`, import.meta.url).href
}
注意：這里只能通過 …/…/ 這種方式去獲取路徑，無法通過@/assets
第三種方式---- 圖片在public目錄下
/**
* @description: 動態(tài)加載圖片 （注意：將圖片放到public目錄下）
* @param {*} imgUrl public目錄下圖片的地址：eg: /public/imgs/a.png, 則imgUrl為 ./imgs/a.png
* @return {*} 返回圖片的絕對路徑
*/
const loadPicture = (imgUrl) => {
let pathnameArr = location.pathname.split("/");
let realPathArr = []
pathnameArr.forEach(item =>{
if( item && item.slice(-5) !== '.html'){
realPathArr.push(item)
}
})
let realPath = location.origin + "/"
if(realPathArr.length > 0){
realPath = realPath + realPathArr.join('/') + "/"
}
return new URL(imgUrl, realPath).href;
}總結(jié)
到此這篇關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的文章就介紹到這了,更多相關(guān)vite圖片動態(tài)加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue項目使用px2rem的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
徹底搞懂并解決vue-cli4中圖片顯示的問題實現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)秒殺倒計時組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家介紹了VUE實現(xiàn)token登錄驗證,詳細(xì)記錄實現(xiàn)token登錄驗證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-router-link選擇樣式設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?Router?提供了強(qiáng)大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03