当前位置: 首页 > news >正文

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

相关文章:

vite构建的react程序放置图片

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

学习事件循环

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

终端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 指南

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

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 组件&#xff0c;依赖 tooltip 组件&#xff1b;当 tooltip 的 trigger 的值不是 hover 时&#xff0c;会触发 close 事件&#xff1b;下拉框的 click 事件&#xff0c;触发了 tooltip 组件的 close 事件 总结一下&am…...

SQLI LABS | Less-37 POST-Bypass mysql_real_escape_string

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

数字后端零基础入门系列 | Innovus零基础LAB学习Day9

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

深度学习:GLUE(General Language Understanding Evaluation)详解

GLUE&#xff08;General Language Understanding Evaluation&#xff09;详解 GLUE&#xff08;General Language Understanding Evaluation&#xff09;是一个用于评估和比较自然语言理解&#xff08;NLU&#xff09;系统的综合基准测试。它包括了一系列的任务&#xff0c;旨…...

基于Multisim直流稳压电源电路±9V、±5V(含仿真和报告)

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

Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么?

直接区别&#xff1a; configureWebpack项直接覆盖同名配置&#xff1b;chainWebpack项直接修改默认配置。 configureWebpack配置&#xff1a; // 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 &#xff0c;ubuntu22.04,aarch64 ,cpu rk3588s targetubuntu22.04target-archaarch64target-cpurk3588s 安装 qemu-user-static 进入 …...

Python注意力机制Attention下CNN-LSTM-ARIMA混合模型预测中国银行股票价格|附数据代码...

全文链接&#xff1a;https://tecdat.cn/?p38195 股票市场在经济发展中占据重要地位。由于股票的高回报特性&#xff0c;股票市场吸引了越来越多机构和投资者的关注。然而&#xff0c;由于股票市场的复杂波动性&#xff0c;有时会给机构或投资者带来巨大损失。考虑到股票市场的…...

实验三 JDBC数据库操作编程(设计性)

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

各种环境换源教程

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

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的安装和使用

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

初识Electron 进程通信

概述 Electron chromium nodejs native API&#xff0c;也就是将node环境和浏览器环境整合到了一起&#xff0c;这样就构成了桌面端&#xff08;chromium负责渲染、node负责操作系统API等&#xff09; 流程模型 预加载脚本&#xff1a;运行在浏览器环境下&#xff0c;但是…...

go语言中的通道(channel)详解

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

【JS】内置类型的相关问题

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...