如何在 React 中正确加载并渲染 SVG 图像（解决相对路径失效问题）-js教程-PHP中文网

如何在 React 中正确加载并渲染 SVG 图像（解决相对路径失效问题）

在 React 中直接使用相对路径（如 src='../images/ad.svg'）无法显示 SVG，是因为 Webpack 不会自动处理静态 HTML 标签的 src 属性；必须通过模块导入方式让构建工具识别并解析资源路径。

在 react 中直接使用相对路径（如 `src='../images/ad.svg'`）无法显示 svg，是因为 webpack 不会自动处理静态 html 标签的 `src` 属性；必须通过模块导入方式让构建工具识别并解析资源路径。

React 应用中图像（尤其是 SVG）的加载机制与传统 HTML 有本质区别：静态中的相对路径由浏览器直接解析，而浏览器运行时的当前路径（即页面 URL）通常不是你期望的源码目录结构，导致路径解析失败；相反，import 语句由 Webpack（或 Vite）在构建阶段处理，会将 SVG 文件作为模块编译为可引用的 URL（如 /static/media/ad.abc123.svg），确保路径绝对可靠。

✅ 正确做法：始终通过 ES 模块导入 SVG

import adIcon from '../images/ad.svg';
import userIcon from '../images/user.svg';
import settingsIcon from '../images/settings.svg';

const dropdownItems = [
  { name: '广告管理', icon: adIcon },
  { name: '用户中心', icon: userIcon },
  { name: '系统设置', icon: settingsIcon },
];

function DropdownMenu() {
  return (
    <div classname="dropdown">
      {dropdownItems.map((item) => (
        <div key="{item.name}" classname="dropdown-item">
          @@##@@
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

? 进阶建议：

集中管理图标资源：若图标数量较多（如 >10 个），建议新建 icons/index.ts 统一导出，避免组件内冗余导入：

React Router Code Review
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。

下载
```
// icons/index.ts
export { default as AdIcon } from './ad.svg';
export { default as UserIcon } from './user.svg';
export { default as SettingsIcon } from './settings.svg';
```
然后在组件中解构导入：import { AdIcon, UserIcon } from '@/icons';
SVG 作为 React 组件（推荐）：对于需要动态着色、尺寸控制或交互的 SVG，可使用 @svgr/webpack（Create React App 默认支持）将其转为 React 组件：
```
import { ReactComponent as AdIcon } from '../images/ad.svg';
// 使用时：<adicon classname="w-5 h-5 text-blue-600"></adicon>
```