React 中直接使用相对路径（如 src="../images/ad.svg"）无法显示 SVG，是因为 Webpack 不会自动处理 HTML 属性中的静态路径；必须通过 import 将 SVG 作为模块引入，才能被正确解析并生成有效的公共 URL。

react 中直接使用相对路径（如 `src="../images/ad.svg"`）无法显示 svg，是因为 webpack 不会自动处理 html 属性中的静态路径；必须通过 `import` 将 svg 作为模块引入，才能被正确解析并生成有效的公共 url。

在 React 项目中（尤其是基于 Create React App 或 Vite 的标准配置），图像资源（包括 SVG）需以模块方式导入，而非硬编码字符串路径。这是因为构建工具（如 Webpack 或 esbuild）会对 import 语句进行静态分析，将 SVG 文件编译为可访问的 URL（例如哈希化路径或 data URL），而 <img src="../images/ad.svg"> 中的字符串路径在运行时由浏览器解析，此时它相对于当前 HTML 页面或 JS 执行上下文，并非项目源码结构，极易因打包后目录结构变化或 public 目录限制而 404。

✅ 正确做法：使用 ES 模块导入

import adIcon from '../images/ad.svg';
import logoIcon from '../images/logo.svg';

function DropdownMenu() {
  const options = [
    { name: '广告', icon: adIcon },
    { name: 'Logo', icon: logoIcon },
    { name: '设置', icon: require('../images/settings.svg') }, // 也可用 require（不推荐，缺乏类型支持）
  ];

  return (
    <div className="dropdown">
      {options.map((item) => (
        <div key={item.name} className="dropdown-item">
          <img src={item.icon} alt={item.name} className="icon" />
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

export default DropdownMenu;

? 关键注意事项：

• 不要混用路径字符串与模块导入：<img src="../images/ad.svg" /> 在开发环境可能偶然生效（依赖服务器配置），但生产构建后几乎必然失败；

• SVG 可作为 React 组件直接导入（需配置或使用 @svgr/webpack）：

  

  Ainative React Sdk

  使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

  下载

  import { ReactComponent as AdIcon } from '../images/ad.svg';
  // 使用：<AdIcon className="icon" />

  这种方式支持样式控制和内联优化，更适合图标场景；

• 大型图标集建议解耦管理：将图标映射数组提取至独立文件（如 icons.js），便于维护与复用：

  // icons.js
  import ad from './images/ad.svg';
  import user from './images/user.svg';
  import bell from './images/bell.svg';
  
  export const ICON_MAP = {
    ad,
    user,
    bell,
  };
  
  export const ICON_LIST = [
    { id: 'ad', label: '广告' },
    { id: 'user', label: '用户' },
    { id: 'bell', label: '通知' },
  ];

  然后在组件中按需组合使用。

? 总结：React 中所有静态资源（图片、SVG、字体等）都应通过 import 声明式引入，这是确保路径可靠性、启用构建优化（压缩、哈希、CDN 适配）的前提。放弃“直写路径”的惯性思维，拥抱模块化资源管理，是写出健壮前端代码的重要实践。