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