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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大模型拒绝采样

2402.10038 (arxiv.org) 对每一个提示词xi生成k个响应&#xff0c;然后从k个响应中选择2个响应对&#xff08;yil, yij&#xff09;&#xff0c;计算两者的回报&#xff08;reward&#xff09;差值&#xff0c;如果差值大于阈值η&#xff08;超参数&#xff09;&#xff0c;就…

知识库搭建|员工培训的效率利器

在企业的快速发展过程中&#xff0c;知识库的搭建成为了提升员工培训效率的关键一环。一个高效的知识库不仅能够为员工提供便捷的学习资源&#xff0c;还能促进知识的持续积累和传承。本文将探讨如何借助知识库工具&#xff0c;来提升员工培训的效率。 一、知识库在员工培训中…

OneRestore: A Universal Restoration Framework for Composite Degradation 论文阅读笔记

这是武汉大学一作单位的一篇发表在ECCV2024上的论文&#xff0c;文章代码开源&#xff0c;文章首页图如下所示&#xff0c;做混合图像干扰去除&#xff0c;还能分别去除&#xff0c;看起来很牛逼。文章是少见的做混合图像干扰去除的&#xff0c;不过可惜只包含了3种degradation…

C#程序开发,检测当前电脑已经安装的软件目录

在Windows中使用C#做软件开发&#xff0c;有时候需要获取当前系统中已安装的软件及其版本号&#xff0c;接下来就简单介绍一下&#xff0c;如何通过C#获取来实现。 1、通过注册表 public List<PcSoftinfo> GetAllInstalledSoftware(string name) {var keys new Regist…

C++ 23的格式化输出

C23 引入了一些新的功能和改进&#xff0c;其中与格式化输出相关的主要变化是对 <format> 库&#xff08;也称为 C20 的标准库格式化功能&#xff09;的进一步支持和可能的增强。C20 已经引入了 <format> 库&#xff0c;提供了一个强大的、类型安全的字符串格式化功…

系统架构设计师论文:论系统安全架构设计及其应用

试题二:论系统安全架构设计及其应用 信息安全的特征是为了保证信息的机密性、完整性、可用性、可控性和不可抵赖性。信息系统的安全保障是以风险和策略为基础,在信息系统的整个生命周期中提供包括技术、管理、人员和工程过程的整体安全,在信息系统中保障信息的这些安全特征…

2024最新版JavaScript逆向爬虫教程-------基础篇之Proxy与Reflect详解

目录 一、监听对象的操作二、Proxy基本使用2.1 创建空代理2.2 定义捕获器2.2.1 Proxy的set和get捕获器2.2.2 Proxy(handler)的13个捕获器 三、Reflect的作用3.1 Reflect的使用3.2 Reflect其余方法(9个)3.3 Proxy与Reflect中的receiver参数3.4 Reflect中的construct方法 ECMAScr…

如何选择CMS网站管理系统来创建网站呢?

在网站规划中&#xff0c;选择一个合适的CMS&#xff08;内容管理系统&#xff09;尤其重要。CMS是一种用于制作、编辑和管理网站内容的建站工具&#xff0c;它能降低建站的难度、节省建站的时间、提高网站创建的效率和质量。 当然、想提高网站创建的质量&#xff0c;还是得选对…

ES5 和 ES6 数组的操作方法

在 JavaScript 中&#xff0c;数组的操作方法非常丰富&#xff0c;包括 ES5 和 ES6 中引入的各种方法。以下是对这些数组方法的详细介绍&#xff0c;分为 ES5 和 ES6。 目录 一、ES5 数组方法 1. 创建数组 2. 数组增加元素 3. 数组删除元素 4. 查找元素 5. 遍历数组 6.…

鸿蒙next版开发:订阅应用事件(ArkTS)

在HarmonyOS 5.0中&#xff0c;ArkTS提供了强大的应用事件订阅机制&#xff0c;允许开发者订阅和处理系统或应用级别的事件。这一功能对于监控应用行为、优化用户体验和进行性能分析至关重要。本文将详细介绍如何在ArkTS中订阅应用事件&#xff0c;并提供示例代码进行说明。 应…

【juc】AbstractQueuedSynchronized为什么采用双向链表

目录 1. 说明2. 双向链表的特性2.1 双向指针2.2 高效操作2.3 支持双向遍历 3. AQS的设计需求3.1 管理等待线程3.2 高效传播状态信息3.3 支持异常处理3.4 简化自旋竞争锁的逻辑 4. 单向链表的局限性4.1 遍历方向受限4.2 节点删除操作复杂4.3 状态信息传播不便 1. 说明 1.Abstra…

抽象工厂模式详解

1. 引言 1.1 设计模式概述 设计模式&#xff08;Design Patterns&#xff09;是软件开发中解决常见问题的一种最佳实践。它们通过总结经验&#xff0c;提供了一套被验证有效的代码结构和设计原则&#xff0c;帮助开发者提高代码的可维护性、可重用性和可扩展性。 设计模式主…

文献解读-DNAscope: High accuracy small variant calling using machine learning

关键词&#xff1a;基准与方法研究&#xff1b;基因测序&#xff1b;变异检测&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;DNAscope: High accuracy small variant calling using machine learning标题&#xff08;中文&#xff09;&#xff1a;DNAsc…

资产安全加固的面试点

资产加固 资产管理属于蓝队前期要做的事情&#xff0c;首先客户单位对他自身的单位资产有一定的了解哪些资产的优先级和重要程度等等&#xff0c;所以开始要做相关的资产梳理&#xff0c;对客户单位进行统计&#xff0c;梳理&#xff0c;分析&#xff0c;找到哪些点是可以授权…

自动驾驶3D目标检测综述(一)

文章地址&#xff1a;[2206.09474] 3D Object Detection for Autonomous Driving: A Comprehensive Survey (arxiv.org) 这篇综述简单易懂&#xff0c;非常合适对自动驾驶和3D目标检测感兴趣的小白阅读&#xff0c;对相关算法进行初步理解。 目录 一、摘要 &#xff08;一&a…

微软域名邮箱:如何设置管理烽火域名邮箱?

微软域名邮箱的设置技巧&#xff1f;免费域名邮箱注册设置教程&#xff1f; 微软域名邮箱为企业提供了一个强大且灵活的解决方案&#xff0c;帮助企业轻松管理其域名邮箱。烽火将详细介绍如何设置和管理微软域名邮箱&#xff0c;确保您的团队能够高效地使用这一工具。 微软域…

DirectShow过滤器开发-写AVI视频文件过滤器

下载本过滤器DLL 本过滤器将视频流和音频流写入AVI视频文件。 过滤器信息 过滤器名称&#xff1a;写AVI 过滤器GUID&#xff1a;{2EF49957-37DF-4356-A2A0-ECBC52D1984B} DLL注册函数名&#xff1a;DllRegisterServer 删除注册函数名&#xff1a;DllUnregisterServer 过滤器有…

算法——二分查找(leetcode704)

对于二分查找而言,首先我们得到的查找数组必须是一个有序数组,接着通过数组的两端得到左指针和右指针继而得到中间指针指向数组中间元素,将中间元素与目标值比较如果大于目标值舍弃数组中间元素右边的一半将右指针重置为中间指针下标-1中间指针重置为左右指针下标之和除以2&…

新版 idea 编写 idea 插件时,启动出现 ClassNotFound

IntelliJ IDEA 2024.1.6 (Ultimate Edition) Build #IU-241.19072.14, built on August 8, 2024 Licensed to Sophia Tout Subscription is active until June 29, 2025. For educational use only. Runtime version: 17.0.111-b1207.30 amd64 Kotlin: 241.19072.14-IJ 新版本…

Pytorch基本语法

Pytorch Pytorch的基本使用基本使用张量的简介1.张量的基本类型2.张量的创建1).基本创建方式1.torch.tensor()根据指定数据创建张量2.torch.Tensor() 根据指定形状创建张量&#xff0c;也可以用来创建指定数据的张量3.torch.IntTensor()、torch.FloatTensor()、torch.DoubleTen…