javascript - 使用semantic-ui-react显示svg？

Question

如何使用semantic-ui-react Image组件显示图像？ 我注意到非 React 版本说它支持 svg 和 img 但 React 版本没有说明是否支持。 我正在做的是

<Image src={ImagePath}/>

但是，我只看到一个损坏的图像图标。 Webpack 编译正确，所以路径没有错误。 有人可以让我知道解决我的问题的最佳方案是什么吗？

Answer 1

我正在使用 webpack4，以下是我用于图像的设置，

webpack.config.js, module rules -

{
    test: /\.(ttf|woff|woff2|eot|png|svg|gif)$/,
    use: {
    loader: 'url-loader',
    options: {
            limit: 10000
        }
    }
}

我在 src/ 中有一个 static/ 目录，其中包含图像并使用 CopyWebpackPlugin ，我将所有这些图像复制到 build 中/ 作为，

webpack.config.js, module plugins -

new CopyWebpackPlugin([ { from: 'src/static' } ]),

Finally to use the svg in Image component of semantic-ui-react, I refer it by relative path as -

<Image src="/images/logo.svg" alt="no logo"/>

希望这有帮助。