2

如何使用语义 UI 反应图像组件显示图像？我注意到非反应版本说它支持 svg，img但反应版本没有说明它是否支持。我正在做的是

<Image src={ImagePath}/>

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

4

1 回答 1

0

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

webpack.config.js，模块规则 -

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

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

webpack.config.js，模块插件 -

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

最后要在语义-ui-react 的 Image 组件中使用svg ，我通过相对路径将其称为 -

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

希望这可以帮助。

于 2019-01-19T15:09:30.040 回答