Vite 构建的 React 项目中图片放置的最佳实践

在 Vite 构建的 React 项目中，正确处理图片等静态资源非常重要。通常有两种主要方式来放置和引用图片：使用 public 目录或 src/assets 目录。

1. 使用 public 目录

将图片放置在项目根目录下的 public 文件夹中是一种简单直接的方式。

工作原理

• public 目录下的文件在构建时会被 原样复制 到输出目录（默认为 dist）的根路径下。
• 这些文件 不会 被 Vite 处理、压缩或重命名（不会添加 hash）。
• 你可以通过 绝对路径 (/) 来引用这些文件。

示例

假设你的项目结构如下：

project-root/
├── public/
│   └── logo.png
├── src/
│   └── App.jsx
...

在你的 React 组件（例如 App.jsx）中，可以这样引用 logo.png：

function App() {
  // 使用绝对路径 /logo.png
  return <img src="/logo.png" alt="Logo" />
}

构建后，logo.png 会位于 dist/logo.png，浏览器可以通过 http://your-domain.com/logo.png 访问到它。

注意：为什么必须使用绝对路径 /？ 如果你省略了开头的 /，像这样写：

// 错误示例：使用相对路径
return <img src="logo.png" alt="Logo" />;

浏览器会将其解析为 相对于当前页面 URL 的路径。例如，如果当前页面是 http:/your-domain.com/about，浏览器会尝试请求 http://your-domain.com/about/logo.png，这通常会导致 404 错误。因此，引用 public 目录下的资源时，务必使用以 / 开头的绝对路径。

2. 使用 src/assets 目录

将图片放置在 src 目录下的 assets 文件夹（或其他子目录）是另一种常用的方式，尤其适用于需要 Vite 处理的资源。

工作原理

• 需要通过 JavaScript 的 import 语句来引入图片。
• Vite 会将这些导入的图片视为 模块依赖。
• 在构建时，Vite 会处理这些图片（例如，优化、添加 hash 以实现缓存控制），并将它们复制到输出目录（通常是 dist/assets）。
• import 语句会返回处理后的图片的 最终公共路径。

示例

假设你的项目结构如下：

project-root/
├── src/
│   ├── assets/
│   │   └── logo.png
│   └── App.jsx
...

在 App.jsx 中，你需要先 import 图片，然后将其作为 src 属性的值：

import logoSrc from './assets/logo.png' // 相对路径导入

function App() {
  // 使用导入的路径变量
  return <img src={logoSrc} alt="Logo" />
}

构建后，logo.png 可能会被重命名为类似 dist/assets/logo.a1b2c3d4.png 的文件，而 logoSrc 变量的值将是这个最终的路径（例如 /assets/logo.a1b2c3d4.png）。

总结：如何选择？

• 使用 public 目录：
  • 需要确保文件名不变时。
  • 需要通过绝对 URL 直接访问资源时。
  • 对于不需要 Vite 处理或优化的文件（例如 favicon.ico、robots.txt 或一些第三方库的静态资源）。
• 使用 src/assets 目录：
  • 希望 Vite 处理和优化图片时。
  • 希望利用构建过程中的 hash 实现长期缓存时。
  • 对于作为应用程序一部分的图标、背景图等资源。