vite动态导入图片汇总

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;

                 }