深圳网络做网站/人民日报新闻消息
在 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" />);
};
相关文章:

vite构建的react程序放置图片
在 Vite 中,将图片放置在 public 文件夹中可以直接使用相对路径(如 /logo.png)的原因主要与 Vite 的构建和资源处理方式有关。以下是详细的解释: 1. 公共访问性 public 文件夹中的文件在构建过程中不会被 Vite 处理或哈希化。这…...

学习事件循环
本文内容由智谱清言产生。 什么是事件循环? 事件循环(Event Loop)是一个编程概念,特别是在异步编程和GUI(图形用户界面)应用程序中非常常见。它是用来处理和管理事件(如用户输入、计时器事件、…...

终端NuShell git权限异常处理
使用nushell git,关联老的秘钥文件 D:\phpstudy_pro\WWW\xmh\backend|10-312> mkdir d:\Users\Administrator\.ssh PC-20240719ZOSM||2411063145840 D:\phpstudy_pro\WWW\xmh\backend|10-312> cp -r c:\U…...

Mybatis Plus 集成 PgSQL 指南
“哲学家们只是用不同的方式解释世界,而问题在于改变世界。” ——卡尔马克思 (Karl Marx) 解读:马克思强调了实践的重要性,主张哲学不仅要理解世界,更要致力于改造世界。 本文我们引入 Mybatis Plus 作为 ORM ,并且使…...

Rust常用数据结构教程 Map
文章目录 一、Map类型1.HashMaphashMap的简单插入entry().or_insert()更新hashMap 2.什么时候用HashMap3.HashMap中的键 二、BTreeMap1.什么时候用BTreeMap2.BTreeMap中的键 参考 一、Map类型 键值对数据又称字典数据类型 主要有两种 HashMap - BTreeMap 1.HashMap HashM…...

<el-popover>可以展示select change改变值的时候popover 框会自动隐藏
一、问题定位 点击查看详细链接 element-plus 的 popover 组件,依赖 tooltip 组件;当 tooltip 的 trigger 的值不是 hover 时,会触发 close 事件;下拉框的 click 事件,触发了 tooltip 组件的 close 事件 总结一下&am…...

SQLI LABS | Less-37 POST-Bypass mysql_real_escape_string
关注这个靶场的其它相关笔记:SQLI LABS —— 靶场笔记合集-CSDN博客 0x01:过关流程 输入下面的链接进入靶场(如果你的地址和我不一样,按照你本地的环境来): http://localhost/sqli-labs/Less-37/ 是一个登…...

数字后端零基础入门系列 | Innovus零基础LAB学习Day9
Module 16 Wire Editing 这个章节的学习目标是学习如何在innovus中手工画线,切断一根线,换孔,更改一条net shape的layer和width等等。这个技能是每个数字IC后端工程师必须具备的。因为项目后期都需要这些技能来修复DRC和做一些手工custom走线…...

深度学习:GLUE(General Language Understanding Evaluation)详解
GLUE(General Language Understanding Evaluation)详解 GLUE(General Language Understanding Evaluation)是一个用于评估和比较自然语言理解(NLU)系统的综合基准测试。它包括了一系列的任务,旨…...

基于Multisim直流稳压电源电路±9V、±5V(含仿真和报告)
【全套资料.zip】直流稳压电源电路9V、5VMultisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 一般直流稳压电源都使用220伏市电作为电源,经过变压、整流、滤波后给稳压电路进行稳压…...

Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么?
直接区别: configureWebpack项直接覆盖同名配置;chainWebpack项直接修改默认配置。 configureWebpack配置: // vue.config.js module.exports {configureWebpack: {plugins: [new MyAwesomeWebpackPlugin()]} }该代码段中的对象将会被web…...

ubuntu主机搭建sysroot交叉编译环境
ubuntu主机搭建sysroot交叉编译环境 主机是 ubuntu22.04 x86-64 hostubuntu22.04host-archx86-64host-cpui9-13900k 目标板是香橙派5b ,ubuntu22.04,aarch64 ,cpu rk3588s targetubuntu22.04target-archaarch64target-cpurk3588s 安装 qemu-user-static 进入 …...

Python注意力机制Attention下CNN-LSTM-ARIMA混合模型预测中国银行股票价格|附数据代码...
全文链接:https://tecdat.cn/?p38195 股票市场在经济发展中占据重要地位。由于股票的高回报特性,股票市场吸引了越来越多机构和投资者的关注。然而,由于股票市场的复杂波动性,有时会给机构或投资者带来巨大损失。考虑到股票市场的…...

实验三 JDBC数据库操作编程(设计性)
实验三 JDBC数据库操作编程(设计性) 实验目的 掌握JDBC的数据库编程方法。掌握采用JDBC完成数据库链接、增删改查,以及操作封装的综合应用。实验要求 本实验要求每个同学单独完成;调试程序要记录调试过程中出现的问题及解决办法…...

各种环境换源教程
目录 pip 换源相关命令永久换源1. 命令行换源2. 配置文件换源 临时换源使用官方源使用镜像源 报错参考 npm换源相关命令永久换源1. 命令行换源2. 配置文件换源 pip 换源 相关命令 更新 pip 本身 首先,为了确保你使用的是最新版本的 pip,可以通过以下命…...

Rust项目中的Labels
姊妹篇: Go项目中的Labels 按照issue数量从多到少排序: https://github.com/rust-lang/rust/labels?page2&sortcount-desc https://github.com/rust-lang/rust/labels/A-contributor-roadblock 第1页: 标签/中文说明数字T-compiler/编译器Relevant to the compiler tea…...

Jmeter的安装和使用
使用场景: 我们需要对某个接口进行压力测试,在多线程环境下,服务的抗压能力;还有就是关于分布式开发需要测试多线程环境下数据的唯一性。 解决方案: jmeter官网连接:Apache JMeter - Apache JMeter™ 下载安装包 配…...

初识Electron 进程通信
概述 Electron chromium nodejs native API,也就是将node环境和浏览器环境整合到了一起,这样就构成了桌面端(chromium负责渲染、node负责操作系统API等) 流程模型 预加载脚本:运行在浏览器环境下,但是…...

go语言中的通道(channel)详解
在 Go 语言中,通道(channel) 是一种用于在 goroutine(协程)之间传递数据的管道。通道具有类型安全性,即它只能传递一种指定类型的数据。通道是 Go 并发编程的重要特性,能够让多个 goroutine 之间…...

【JS】内置类型的相关问题
我是目录 引言内置类型undefined与nullnull和undefined的区别字符串转换为字符串数字0.1+0.2不等于0.3NaNBigInt大数相加问题原生函数(封箱与解封)判断类型的方法typeofinstanceofObject.prototype.toString.callconstructor类型转换toStringtoNumbertoBoolean显式强制类型转…...

Mac上无法访问usr/local的文件
sudo chmod 755 /usr/loca 最后用百度提供的方法解决了...

http 常见状态码
1xx 信息,表示临时响应并需要请求者继续执行操作 2xx 成功,操作被成功接收并处理 3xx 表示要完成请求,需要进一步操作。通常,这些状态码用来重定向 4xx 客户端错误,请求包含语法错误或无法完成请求 5xx 服务…...

代码训练营 day59|并查集
前言 这里记录一下陈菜菜的刷题记录,主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕,一年车企软件开发经验 代码能力:有待提高 常用语言:C 系列文章目录 第59天 :第十一章:图论part05 文章目录…...

Node.js——fs模块-路径补充说明
1、相对路径: ./座右铭.txt 当前目录下的座右铭.txt座右铭.txt 等效于上面的写法../座右铭.txt 当前目录的上一级目录中的座右铭.txt 2、绝对路径 D:/Program File Windows系统下的绝对路径/usr/bin Linux系统…...

华为ENSP--ISIS路由协议
项目背景 为了确保资源共享、办公自动化和节省人力成本,公司E申请两条专线将深圳总部和广州、北京两家分公司网络连接起来。公司原来运行OSFP路由协议,现打算迁移到IS-IS路由协议,张同学正在该公司实习,为了提高实际工作的准确性和…...

论软件可靠性设计及其应用
摘要 2023 年 3 月,我所在的公司承接了某智慧加油站平台的建设工作。该项目旨在帮助加油站提升运营效率、降低运营成本和提高销售额。我在该项目中担任系统架构设计师,负责整个项目的架构设计工作。 本文结合我在该项目中的实践,详细论述了…...

Android中桌面小部件framework层使用到的设计模式
在Android中,桌面小部件(App Widget)的Framework层采用了多种设计模式,以实现模块化、可维护性和高效的交互。 以下是Android桌面小部件Framework层中常用的设计模式及其具体应用: 1. 观察者模式(Observe…...

【JavaEE进阶】HTML
本节⽬标 认识 HTML 的基本结构, 学习常⽤的 HTML 标签. 一 HTML基础 1.什么是HTML HTML(Hyper Text Markup Language), 超⽂本标记语⾔. 超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它…...

ElasticSearch 添加IK分词器
ElasticSearch 添加IK分词器 前言一、IK分词器的算法二、Ik分词器的下载安装(Winows 版本)三、Ik分词器的下载安装(Linux 版本)四、验证测试(postman工具)测试 ik_smart 分词算法测试 ik_max_word 分词算法…...

可视化建模与UML《顺序图实验报告》
旷野的规则是永不回头。 一、实验目的: 1、熟悉顺序图的构件事物。 2、熟悉发送者与接受者的关系 3、熟练掌握描绘顺序图 4、加深对顺序图的理解和应用能力 二、实验环境: window7 | 10 | 11 EA15 三、实验内容: 据如下描述绘制顺序图&…...