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 = () => (@@##@@); export default function App() { return ( ); }⚠️ 注意事项：
- ❌ 不要写 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 工程化资源管理的标准实践。
