欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 {*} 返回圖片的絕對路徑
 */
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論