一、单张图片引入
import imgXX from '@/assets/images/xx.png'
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1f6f12de911f49cbbc5c32b69e4b0164.png)
二、多张图片引入
说明:import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d4b2424afce340db814b11120e06e0d0.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3274ae37048a4975b8f082157480426d.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9b97ec5d433d4347bbee75b2a99e7932.png)
注意:填写自己项目图片存放的路径
export const requireImg = (imgPath:String) => {
return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7876ac1922e2469286fccb6b0a8a340a.png)
图片预览成功啦~
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f5ed1dc3555349679d097aef2639efdd.png)