17370845950

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 工程化资源管理的标准实践。