React中直接用路径渲染SVG不显示，导入后正常的问题求助

这是因为React项目构建时，打包工具（比如Webpack、Vite）会对资源文件进行处理，重新生成文件路径。你直接写../images/ad.svg这种字符串形式的相对路径，打包后实际的文件位置和你写的路径不匹配，导致加载失败。而用import导入的方式，打包工具会自动解析资源，替换成打包后的正确路径，所以能正常显示。

给你几个可行的解决方法：

• 在数组中使用require动态导入
  如果你需要从数组里动态获取SVG路径，可以用require来导入，比如：

  const dropdownItems = [
    { name: '广告', svgSrc: require('../images/ad.svg').default },
    // 其他菜单项...
  ];
  

  渲染时直接用<img src={item.svgSrc} />即可。

• 将SVG放到public目录，使用绝对路径
  把你的SVG文件移到项目根目录的public/images文件夹下，然后直接用绝对路径引用：

  <img src="/images/ad.svg" />
  

  这种方式下，打包工具不会处理public目录下的资源，运行时会直接从项目根目录找对应文件，路径不会出错。

• 提前导入所有需要的SVG，再存入数组
  如果SVG数量不多，可以先把所有需要的SVG都import进来，再放到数组里：

  import adSvg from '../images/ad.svg';
  import userSvg from '../images/user.svg';
  
  const dropdownItems = [
    { name: '广告', svgSrc: adSvg },
    { name: '用户', svgSrc: userSvg },
  ];
  

内容的提问来源于stack exchange，提问作者Jake Matthews