1. 本文环境
Vue版本 : 3.4.29Node.js版本 : v20.15.0系统 : Windows11 64位IDE : VsCode
2. 加载图片路径的方式
以下是VUE3中一些常见的引用图片路径的方法：
2.1 public文件夹的方式
2.1.1 public文件夹是什么
在 Vue3 中，public文件夹用于存放静态资源，这些资源不会被 vite打包工具解析处理。在项目打包时，public目录下的资源会被直接复制到输出目录（通常是dist目录）。
2.1.2 使用public文件夹
因为放在public文件夹下的文件，打包的时候不会被重命名。 所以可以使用相对路径 /xxxx.后缀名 来访问该文件。
比如我们在项目根目录新建public文件夹，public文件夹里面有mytest.png，然后可以直接使用相对路径/public/mytest.png或直接使用/mytest.png来访问。
2.2 直接在模板中引用
2.2.1 @是什么
在 Vue3 中，@通常用作路径别名，代表项目的根目录下的src目录。 这样做的好处是在引入文件时，可以使用@来代替相对复杂的src目录路径，使代码更加简洁、易读，同时也避免了易错的相对路径问题。
vite.config.ts默认就有配置 @ 指向 src 目录
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
2.2.2 模板中引用
那么在 Vue 中，你可以直接使用相对路径或 @ 符号来引用图片。例如，如果你的图片位于 src/assets/images 目录下，并且你已经在 vue.config.js 或其他配置文件中设置了 @ 指向 src 目录，那么你可以这样引用图片：
4.3 在
在 Vue 3 项目中，当使用默认配置时，vite打包工具 会将小于 4KB 的图片内联，以减少 HTTP 请求的数量。也就是说，小于 4KB 的图片会被打包到 JavaScript 代码中。(通常是以Base64编码的形式内联)
4.4 遇到报错
如果遇到报错 : TS2307: Cannot find module ‘@/assets/home/banner1.webp‘ or its corresponding type declarations.
说明env.d.ts里没有声明文件类型。 (新建的项目都默认有的)，在env.d.ts里，我们把它加回去就行。
///
3. vue快速入门系列文章
vue3 快速入门 (一) : 环境配置与搭建 vue3 快速入门 (二) : 第一个Vue网页 vue3 快速入门 (三) : vue中的图片路径 Vue3 快速入门 (四) : 使用路由实现页面跳转
本文参考 老生常谈的vue项目中图片路径问题，你真的搞明白了吗？ 前端开发攻略—三种方法解决Vue3图片动态引入问题