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" />
    );
};

原文地址：https://blog.csdn.net/weixin_43063398/article/details/143631285

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！