Отображать svg с помощью семантического пользовательского интерфейса?

Как отображать изображения с помощью компонента Semantic-UI-React Image? Я заметил, что в версии без реакции говорится, что она поддерживает svg и img, но в версии с реакцией не указано, поддерживает она или нет. что я делаю

<Image src={ImagePath}/>

Однако я просто вижу значок сломанного изображения. Webpack компилирует его правильно, поэтому путь правильный. Может ли кто-нибудь дать мне знать, какое лучшее решение моей проблемы?


reactjs javascript svg semantic-ui-react
person Roger Hoang    schedule 29.07.2017    source источник
comment
Вам может понадобиться загрузчик веб-пакетов изображений по адресу npmjs.com/package/image-webpack-loader, а затем вам может потребоваться изменить файл webpack.config.js, чтобы разрешить использование изображений.   -  person Dream_Cap    schedule 29.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я использую 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' } ]),

Наконец, чтобы использовать компонент svg в компоненте изображения semantic-ui-react, я ссылаюсь на него по относительному пути как -

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

Надеюсь это поможет.

person pritam    schedule 19.01.2019