默认环境
打包环境：vite3/webpack4;
前端框架：vue3
概述
默认是在已经配置好@匹配根路径的情况下，我们可以直接在图片标签的src属性中使用@ 代替根目录，进行图片索引，是可以正常显示图片的；
eg:
在浏览器中解析转换后：
问题
当动态使用src属性的时候，从变量去读取一个字符串，如果该值是含有@符号是会报错的；因为在编译的时候，它是找不到正确的路径的；
找不到图片资源：
在浏览器中的属性也不会进行解析转换，直接将字符串放了上去；
解决方案
1.如果是在webpack中，webpack支持用require函数来动态加载静态资源的：
但是如果在vite环境下则会报错 require is not define
2.如果是在vite中，vite支持用URL类实例来动态加载静态资源的：
定义一个函数间接使用URL实例的href变量属性；
且数据得更改：
URL的第一个参数是静态资源的相对路径，第二个参数是当前文件的URL(文件变量；import.meta.url);
声明：感谢coderwhy大佬，此文章仅代表个人经验，供参考，如有问题，欢迎指出，共同探讨，谢谢！
