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)加載圖片操作,文中通過代碼介紹的非常詳細(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
}
注意：這里只能通過 …/…/ 這種方式去獲取路徑，無法通過@/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)文章
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于VUE3引入html文件并傳值的相關(guān)資料,這是最近在項(xiàng)目中遇到了的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）實(shí)例詳解
本文通過實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）知識(shí),需要的朋友可以參考下2017-12-12
vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關(guān)于Vue中ref和$refs使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01 
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12 
這篇文章主要介紹了vue項(xiàng)目依賴檢查depcheck問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07