第一种方式(使用于处理单个链接的资源文件)
import homeIcon from '@/assets/mdcImgs/home/home_icon.png'
<img :src="homeIcon" />
第二种方式(适用于处理多个链接的资源文件)
推荐,这种方式传入的变量可以动态传入文件路径!!
静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url
这里我们假设:
工具文件目录: src/assets/pubUse.js
// 获取assets静态资源
const getAssetsFile = function (url){
// console.log('url===============', url);
// 获取文件夹下所有图片名称
let files = import.meta.globEager('../assets/mdcImgs/*.png');
let AllPics = Object.values(files).map((v) => v.default);
// console.log('AllPics===============', AllPics);
let isExist = 0;
let imgSrc = '';
// 遍历所有图片,判断是否存在该url图片
AllPics.forEach( val => {
let url2 = url.substring(0, url.indexOf('.'));
// console.log('url2===============', url2);
if(val.indexOf(url2) !== -1) {
isExist += 1;
}
});
// console.log('isExist===============', isExist);
if (isExist !== 0) {
// 头像存在
imgSrc = url;
} else {
imgSrc = 'test.png';
}
// console.log('imgSrc===============', imgSrc);
return new URL(`./mdcImgs/${imgSrc}`, import.meta.url).href;
};
export default getAssetsFile
使用:
import usePub from '/src/assets/pubUse';
const usePub2 = usePub;
1、在html代码里使用 usePub2
<img :src="usePub2(item.name + '.png')" alt="">
2、在setup方法里使用 usePub
item.imgSrc = usePub(item.name + '.png');