React 中直接使用相对路径的 `
` 会导致图片不显示，必须通过 `import` 语句将图片作为模块引入，再将导入的变量赋值给 `src` 属性，才能确保 Webpack/Vite 等构建工具正确解析并打包静态资源。
在 react（尤其是使用 create react app、vite 或 next.js 等现代构建工具时），静态图片资源不能仅靠相对路径引用。即使 chrome devtools 显示 200 ok，也并不代表图片被正确加载——这往往是因为浏览器尝试从公共 url（如 /logo.jpg）请求资源，而该路径未被服务端配置或未正确拷贝至 public/ 目录，导致实际返回的是 404 页面（但被某些代理或服务端静默处理为 200，造成误导）。
✅ 正确做法是：将图片作为模块导入（module import），利用构建工具的 asset 处理能力自动哈希、优化并注入正确路径：
import React from 'react';
// ✅ 正确：以模块方式导入图片（支持 JPG/PNG/SVG 等）
import logo from './istockphoto-1239476413-1024x1024.jpg';
const HeaderLogo = () => (
<img
className="Logo"
src={logo}
alt="Company logo"
width={120}
height={40}
// 可选：添加样式避免布局塌陷
style={{ objectFit: 'contain' }}
/>
);
export default function App() {
return (
<div className="App">
<header className="header">
<HeaderLogo />
<nav className="nav-items">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#cart">Cart</a></li>
</ul>
</nav>
</header>
</div>
);
}⚠️ 注意事项：
- ❌ 不要写 src="./logo.jpg" 或 src="logo.jpg" —— 这属于“public 目录直引”，仅当图片放在 public/ 下且路径与 public 为基准才有效（如 src="/logo.jpg"），但会失去构建时的优化（压缩、hash、CDN 支持等）；
- ✅ 推荐统一使用 import 方式，适用于 src/ 下任意位置的图片；
- 若使用 SVG，还可直接导入为 React 组件（import { ReactComponent as Logo } from './logo.svg';），获得更好的可定制性；
- 检查控制台是否报错 Failed to load resource 或 404，并确认 Network 标签中图片请求的实际响应内容（而非仅看状态码）；
- 开发环境热更新后，有时需强制刷新（Ctrl+F5）清除缓存，避免旧路径残留。
掌握这一模式，不仅能解决 logo 不显示问题，更是 React 工程化资源管理的标准实践。
