vite构建的react程序放置图片

devtools/2025/2/12 5:13:42/

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


http://www.ppmy.cn/devtools/132592.html

相关文章

蓝桥杯第21场小白入门赛补题

5.蓝桥派对 思路 &#xff1a;一个区间与多少个其他区间有关联&#xff0c;先对所有区间左端点和右端点从小到大排序&#xff0c;对于每个询问&#xff0c;我们先算出[1,r]这个区间里有多少个区间的起点即区间总数&#xff0c;使用upper_bound函数&#xff0c;然后使用lower_bo…

使用EasyExcel实现excel导入

下文将简述在SpringBoot如何使用EasyExcel,从多sheet页&#xff0c;上万级数据excel导入到数据库中&#xff0c;本文使用mybatis作为ORM映射框架 准备环境 创建用户表users 创建用户实体对象级底层方法 userMapper.xml中定义批量增加方法 <insert id"batchSave&qu…

【果实种子识别】Python+深度学习+人工智能+CNN卷积神经网络算法+TensorFlow+算法模型训练

一、介绍 果实种子识别系统&#xff0c;使用Python语言进行开发&#xff0c;通过TensorFlow搭建卷积神经网络算法模型&#xff0c;对10种坚果果实&#xff08;‘杏仁’, ‘巴西坚果’, ‘腰果’, ‘椰子’, ‘榛子’, ‘夏威夷果’, ‘山核桃’, ‘松子’, ‘开心果’, ‘核桃…

【LuatOS】基于WebSocket的同步请求框架

0x00 缘起 由于使用LuatOS PC模拟器发起快速且海量HTTP请求&#xff08;1000 次/秒&#xff09;时&#xff0c;会耗尽PC的TCP连接资源&#xff0c;而无法进行继续进行访问请求。故使用WebSocket搭建类似于HTTP的“同步请求相应”的通信框架&#xff0c;以实现与HTTP类似的功能…

用友U8接口-isHasCounterSignPiid错误

错误消息 调用U813的审批流方法报错&#xff0c;找不到方法:“Boolean UFIDA.U8.Audit.BusinessService.ManualAudit.isHasCounterSignPiid System.Web.Services.Protocols.SoapException:服务器无法处理请求。 ---> System.MissingMethodException: 找不到方法:“Boolean…

spring boot 项目配置https服务

怀旧网个人博客网站地址&#xff1a;怀旧网&#xff0c;博客详情&#xff1a;spring boot 项目配置https服务 第一步&#xff1a;申请ssl证书 在自己的域名注册网站可以申请&#xff0c;建议使用腾讯的ssl证书申请服务&#xff08;免费&#xff09; 申请时需要绑定需要添加htt…

任务中心全新升级,新增分享接口文档功能,MeterSphere开源持续测试工具v3.4版本发布

2024年11月5日&#xff0c;MeterSphere开源持续测试工具正式发布v3.4版本。 在这一版本中&#xff0c;系统设置方面&#xff0c;任务中心支持实时查看系统即时任务与系统后台任务&#xff1b;接口测试方面&#xff0c;新增接口文档分享功能、接口场景导入导出功能&#xff0c;…

Node.js 常用工具util、文件系统使用介绍 (基础介绍 七)

常用工具util util 是一个Node.js 核心模块&#xff0c;提供常用函数的集合&#xff0c;用于弥补核心 JavaScript 的功能 过于精简的不足。 使用方法如下&#xff1a; const util require(util); util.callbackify util.callbackify(original) 将 async 异步函数&#xff…