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 中,你可以这样引用图片:

javascript 复制代码
<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 会处理这些图片并为它们生成唯一的哈希值,以便于缓存管理。例如:

javascript 复制代码
import logo from './assets/logo.png';

const MyComponent = () => {
    return (
        <img src={logo} alt="Logo" />
    );
};
相关推荐
weixin_4541024617 分钟前
cordova android12+升级一些配置注意事项
android·前端·cordova
BillKu37 分钟前
node.js、npm相关知识
前端·npm·node.js
靠近彗星37 分钟前
基于 Vue + Django + MySQL 实现个人博客/CMS系统
前端·vue.js·python·mysql·django
予安灵43 分钟前
《白帽子讲 Web 安全》之服务端请求伪造(SSRF)深度剖析:从攻击到防御
前端·安全·web安全·网络安全·安全威胁分析·ssrf·服务端请求伪造
锋行天下1 小时前
WebSocket 即时通讯前后端设计和基于token的鉴权
前端·后端
树上有只程序猿1 小时前
前端方面移动端适配方法,减少兼容性问题
前端
学吧别真挂了1 小时前
正则表达式从入门到飞升:覆盖90%前端场景的秘籍
前端·javascript·正则表达式
森叶1 小时前
利用 Chrome devTools Source Override 实现JS逆向破解案例
前端·javascript·chrome devtools
welkin1 小时前
KMP 个人理解
前端·算法
用户90561493152221 小时前
Flutter开发入门总结
前端