vite构建的react程序放置图片
在 Vite 中，将图片放置在 public 文件夹中可以直接使用相对路径（如 /logo.png）的原因主要与 Vite 的构建和资源处理方式有关。以下是详细的解释：
1. 公共访问性
public 文件夹中的文件在构建过程中不会被 Vite 处理或哈希化。这意味着这些文件会被原样复制到最终的 dist 目录中，并且可以通过根路径直接访问。例如，如果你在 public 文件夹中有一个名为 logo.png 的文件，构建后它将位于 dist/logo.png，因此可以通过 URL /logo.png 直接访问。
示例
假设你的项目结构如下：
my-vite-project/
├── public/
│ └── logo.png
├── src/
│ └── App.jsx
└── index.html在你的 App.jsx 中，你可以这样引用图片：
<img src="/logo.png" alt="Logo" />这段代码会在浏览器中请求 /logo.png，并且由于该文件位于 public 文件夹中，Vite 会确保它能够被访问。
那么为什么一定要加“/”呢？
如果你直接写 <img src="logo.png" alt="Logo" />，而没有加 /，浏览器会将其视为相对路径，尝试从当前 URL 的位置查找该图片。例如，如果你的页面 URL 是 http://localhost:3000/cities，浏览器会尝试从 http://localhost:3000/cities/logo.png 查找图片，这通常不是你想要的。
- 如果你在
App.jsx中使用<img src="logo.png" alt="Logo" />，浏览器将尝试访问http://localhost:3000/cities/logo.png。当你在<img>标签中使用相对路径（如src="logo.png"）时，浏览器会根据当前页面的 URL 来解析这个路径。 - 如果你想从公共目录加载该图片，你需要使用
<img src="/logo.png" alt="Logo" />，这样浏览器会正确地请求http://localhost:3000/logo.png。
2.使用 src/assets
如果将图片放置在 src/assets 文件夹中，你需要通过 import 来引用它们，这样 Vite 会处理这些图片并为它们生成唯一的哈希值，以便于缓存管理。例如：
import logo from './assets/logo.png';const MyComponent = () => {return (<img src={logo} alt="Logo" />);
};