vite项目的静态图片资源可放在public文件夹,也可放在asset文件下,两者的区别如下:
- public下的文件不经过编译,在构建的时候只是复制到dist文件夹下
- asset下的文件在编译的时候会转成js,使用的时候需要导入(webpack下可使用require导入)
假设项目里有个img标签需要动态引入图片资源:
<img :src="getImgSrc(imgName)" >
从图片存放在public还是asset下来区分:
1、动态导入pulblic下的图片时,只需要按以下方式写
function getImgSrc(imgName){
return `/public/${imgName}` ;
}
2、动态导入asset下的图片时,需要区分图片名称是动态变量还是静态字符串
2.1 静态字符串的写法
function getImgSrc(){
return new URL('../assets/images/pattern.png', import.meta.url).href;
}
但是不可写成:
return new URL(`../assets/images/${imgName}`, import.meta.url).href;
2.2 图片名称为动态变量的写法
function getImgSrc(imgName){
const path = `/src/assets/icons/${imgName}.png`;
const modules = import.meta.globEager('/src/assets/icons/*.png');
return modules[path].default;
}