vite构建的react程序放置图片

news/2024/11/14 13:46:47/

在 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/news/1546665.html

相关文章

如何在本地文件系统中预览 Vue 项目?

要在本地文件系统中直接预览 Vue 项目&#xff0c;你需要确保打包后的 dist 文件夹中的资源能够正确加载。这里有几个步骤可以帮助你实现这一点&#xff1a; 1. 配置 vue.config.js 确保在 vue.config.js 中设置 publicPath 为 ‘./’。这会让所有的资源路径相对于当前目录&a…

Jmeter的安装,设置中文,解决乱码问题

1.Jmeter安装 1-Jmeter如何下载 1---我这里提供一个下载快的方式 https://www.123684.com/s/lWZKVv-4jiav?提取码:4x4y 2---Jmeter官网下载地址 Apache JMeter - Download Apache JMeter 2-配置java环境 1---下载javaJDK 官方下载地址 https://www.oracle.com/java/techno…

数据分析考试怎么考

数据分析在现代商业和学术领域变得越来越重要&#xff0c;为决策提供了坚实的基础。对于那些希望在这一领域发展职业生涯的人来说&#xff0c;通过专业认证来展示自己在数据分析方面的能力无疑是一个明智之举。在众多数据分析认证中&#xff0c;CDA&#xff08;Certified Data …

从“大吼”到“轻触”,防爆手机如何改变危险油气环境通信?

众所周知&#xff0c;在加油站用手机打电话是被明令禁止的&#xff0c;这是因为手机内部会产生静电或射频火花&#xff0c;可能点燃空气中的油气混合物&#xff0c;导致爆炸或火灾。那么加油站的工作人员如何交流呢&#xff1f;以前他们靠吼&#xff0c;现在有了防爆手机&#…

20241108 “postinstall“: “electron-builder install-app-deps“ 導致無法正常下載依賴

在 package.json 中&#xff0c;"postinstall": "electron-builder install-app-deps" 的作用是&#xff1a; 作用说明 依赖安装&#xff1a;electron-builder install-app-deps 是 electron-builder 的一个命令&#xff0c;主要用于在安装依赖后自动安装…

学习threejs,使用导入的模型生成粒子

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.STLLoader STL模型加…

计算机毕业设计Hadoop+Spark高考推荐系统 高考分数线预测 知识图谱 高考数据分析可视化 高考大数据 大数据毕业设计 Hadoop 深度学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

LLM大模型微调入门Lora(LlamaFactory)

一、Llama Factory介绍 LLaMA-Factory 是一个开源框架&#xff0c;旨在简化大型语言模型的定制化微调流程。该框架整合了多样化的训练策略与监控工具&#xff0c;支持通过命令行界面&#xff08;CLI&#xff09;和网页用户界面&#xff08;WebUI&#xff09;等多种方式进行交互…