使用Semantic UI React渲染SVG图片失败，求助解决方法

嘿，我之前也碰到过类似的坑，咱们一步步来搞定它！

从你描述的情况来看，两种SVG导入方式都没让Semantic-UI-React的<Image>组件正常渲染，结合你提供的图片（显示破碎的占位图标），大概率是组件对SVG的处理兼容问题，或者资源加载配置的小问题。下面是几个亲测有效的解决办法：

方法一：用原生<img>标签搭配Semantic样式类 #

有时候Semantic的<Image>组件对SVG的解析会有小偏差，换成原生<img>标签，同时套用Semantic的样式类，就能绕过这个问题：

import logo from './icons/logo.svg';

// 原生img标签+Semantic的样式类组合
<img className="ui mini right floated image" src={logo} alt="网站logo" />

方法二：把SVG当作React组件导入渲染 #

这种方式更灵活，还能直接控制SVG的颜色、大小等样式，也是我最常用的方法。如果你的项目是Create React App v2及以上版本，默认支持这种导入方式：

// 注意要用ReactComponent别名导入SVG
import { ReactComponent as Logo } from './icons/logo.svg';

// 直接把SVG当作React组件使用，同时加上Semantic的样式类
<Logo className="ui mini right floated image" />

如果是自定义Webpack配置的项目，需要先安装@svgr/webpack，然后在配置文件里添加对应的loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },
};

方法三：排查SVG文件本身 #

先试试用浏览器直接打开你的logo.svg文件，看能不能正常显示。如果显示异常，那问题可能出在SVG文件本身——比如有语法错误、引用了外部未加载的资源，这时候需要先修复SVG文件的内容。

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