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来访问。
<img src="/public/mytest.png">
<!-- 等同于上面这个 -->
<img src="/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 目录，那么你可以这样引用图片：
<template>
<img src="@/assets/images/your-image.png" alt="Your Image">
</template>
<script setup lang="ts">
</script>
4.3 在 <script setup> 中引用图片路径
虽然大多数情况下你会直接在模板中引用图片，但有时你可能需要在 <script setup> 中引用图片路径，比如为了动态绑定 src 属性。你可以使用 import 语句来引入图片，但请注意，Vue 不会自动处理这些 import 语句作为模块请求，因此你需要确保它们被正确解析为文件路径。
然而，Vue CLI 或 Vite 等现代前端工具链通常会配置 Webpack 或 ESBuild 等打包工具来解析这些 import 语句，并将其转换为适当的 URL。这意味着你可以像下面这样操作：
<script setup lang="ts">
import yourImagePath from '@/assets/images/your-image.png';
const imageSrc = yourImagePath; // 这里 imageSrc 将会是图片的编译后路径
</script>
<template>
<img :src="imageSrc" alt="Your Image">
</template>
在 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里，我们把它加回去就行。
/// <reference types="vite/client" />
3. vue快速入门系列文章
vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 第一个Vue网页
vue3 快速入门 (三) : vue中的图片路径
Vue3 快速入门 (四) : 使用路由实现页面跳转
