React中SVG无法正常显示问题求助

我之前也碰到过类似的情况，React里直接用相对路径引用SVG经常会因为webpack的资源解析规则出问题，结合你的代码，给你几个可行的解决方案：

1. 使用import导入SVG资源（最推荐） #

React项目中，webpack会处理通过import引入的静态资源，生成正确的URL，避免路径错误。修改你的组件代码：

import imageSvg from '../../svg/image.svg';

// 然后在img标签中使用导入的资源
<Grid item>
  <img 
    src={imageSvg}
    style={{
      opacity: '0.8',
      zIndex: '999'
    }} 
    alt="Custom illustration" 
  />
</Grid>

这样webpack会自动处理SVG的路径，确保资源能被正确加载。

2. 检查路径是否正确 #

如果坚持用字符串路径，先确认你的组件文件和SVG文件的层级关系：

• 假设你的组件在src/components/YourComponent.js，SVG在src/svg/image.svg，那么../../svg/image.svg是正确的；
• 如果组件在src/components/SubFolder/YourComponent.js，路径需要改成../../../svg/image.svg。
  不过这种方式不如import可靠，因为webpack的路径解析可能和你预期的不一样。

3. 排查SVG文件本身的问题 #

看你的SVG代码里有一个<image>标签引用了/assets/illustrations/characters/character_2.png，如果这个图片不存在，虽然不会导致整个SVG不显示，但可以先临时注释掉这个标签，测试SVG的其他部分是否能正常显示，排除SVG本身的语法或资源依赖问题。

4. 将SVG作为React组件导入（更灵活） #

Create React App默认支持将SVG直接作为React组件导入，这样你可以直接像使用组件一样渲染SVG，还能方便修改样式和属性：

import ImageSvg from '../../svg/image.svg';

<Grid item>
  <ImageSvg 
    style={{
      opacity: '0.8',
      zIndex: '999',
      width: '480px',
      height: '360px'
    }} 
  />
</Grid>

先试试第一种方案，应该能解决你的问题，如果还是不行，再检查SVG文件的路径和内容是否有错误。

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