如何在 React 中正确引用并显示图片资源-js教程-PHP中文网

如何在 React 中正确引用并显示图片资源

React 中图片无法显示通常是因为路径错误：src 属性应使用相对于 public 目录的绝对路径（如 /images/airbnb1.png），而非相对路径（如 ../images/airbnb1.png），因 public 文件夹下的资源可通过根路径直接访问。

react 中图片无法显示通常是因为路径错误：`src` 属性应使用相对于 `public` 目录的绝对路径（如 `/images/airbnb1.png`），而非相对路径（如 `../images/airbnb1.png`），因 `public` 文件夹下的资源可通过根路径直接访问。

在 React 项目中，图片等静态资源的引用方式与传统 HTML 或其他前端框架存在关键差异。核心原则是：所有放在 public 文件夹下的资源，都可通过以 / 开头的绝对路径直接访问；而放在 src 文件夹下的资源，则必须通过 import 导入后使用。

你当前的代码中：

@@##@@

使用的是相对路径 ../images/airbnb1.png，这会让浏览器尝试从当前 HTML 页面（即 index.html 所在位置）向上两级再进入 images 目录查找文件——但 React 的开发服务器（Vite 或 Webpack Dev Server）并不会按此逻辑解析静态资源，导致 404。

✅ 正确做法（推荐用于简单静态图）：
将图片放入 public/images/airbnb1.png，然后使用根路径引用：

@@##@@

注意：/ 表示应用的公共根目录（即 public 文件夹），因此 /images/airbnb1.png 等价于 public/images/airbnb1.png。

⚠️ 注意事项：

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

不要将图片放在 src/images/ 下却用 src="../images/..." 引用——这在构建后会失效，且不符合 React 模块系统规范；
若图片位于 src 目录（如 src/assets/airbnb1.png），必须先 import：
```
import airbnbLogo from '../assets/airbnb1.png';

function Navbar() {
  return (
    <nav>
      @@##@@
    </nav>
  );
}
```
此时 Webpack/Vite 会自动处理该模块，生成正确的哈希化路径并确保资源被包含在构建产物中。

? 验证技巧：
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 查看图片请求是否返回 200 OK；若为 404，右键复制图片链接，在地址栏粘贴访问，确认路径是否指向 http://localhost:3000/images/airbnb1.png ——只有该路径能成功访问，才说明 public/images/ 结构正确。

总结：React 中图片路径不是“文件系统路径”，而是“运行时 URL 路径”。牢记 public/ → /，src/ → import，即可避免绝大多数图片加载失败问题。