vite官网地址
https://cn.vitejs.dev/guide/assets
Vite 默认不支持 require
Vite 默认不支持 require，
但可以通过安装 vite-plugin-require-transform 插件来实现。
推荐优先使用 import 方式。
通过@符号和相对路径引入图片
- [align=center][img]https://www.cxy5.com/demo1[/img][/align] [align=center][img]https://www.cxy5.com/demo2[/img][/align]
new URL('url', import.meta.url)动态引入图片
- const imgUrl = new URL('./img.png', import.meta.url).href
- function getImageUrl(name) { return new URL(`../../${name}.png`, import.meta.url).href}
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。
将它与原生的 URL 构造器组合使用，
通过相对路径我们就能得到一个被完整解析的静态资源 URL
Vite 在开发阶段并不需要处理上述代码。
在生产构建时Vite 才会进行必要的转换。保证 URL 在打包后【资源哈希】仍指向正确的地址
这个 URL 字符串必须是静态的，这样才能被分析。
否则代码将被原样保留，进而在 build.target 不支持 import.meta.url 时导致运行时错误。
实践通过 new URL来动态加载图片
- [align=center][img]https://www.cxy5.com/getImgPath(itemImg)[/img][/align]
打包之后也是可以正常显示的
通过 import.meta.glob 的方式动态引入图片
- [align=center][img]https://www.cxy5.com/getImgPath(itemImg)[/img][/align]
打包之后图片也是可以正常展示的
在vite中，为什么 new URL() 不支持 @路径来表示
@是构建时的路径别名，
new URL() 是浏览器原生的运行API，浏览器运行时完全不知道这个别名。
浏览器只会把它当作普通的相对路径或绝对路径来处理，不会经过 Vite 的模块来解析。
微信 本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
