Реагировать и SVG.Работает для JSX, не работает при использовании в стиле - PullRequest
Новая
       22

Реагировать и SVG.Работает для JSX, не работает при использовании в стиле

0 голосов
/ 04 июня 2019

Вот мой компонент.Когда я использую SVG из JSX, он отображает OK: 

   import React from "react";
    import Radium from 'radium';
    import LogoSvg from '../../images/my_logo.svg';


    class HeaderBar extends React.Component {

        render () {

            return (
                <div>
                    <LogoSvg />
                </div>
            );
        }
    }

export default Radium(HeaderBar);

, однако, когда я изменяю это, ничего не отображается.Как будто backgroundImage даже не принят. Изменение backgroundImage на простой background: 'red' работает хорошо.Что я здесь не так делаю? 

import React from "react";
import Radium from 'radium';
import LogoSvg from '../../images/my_logo.svg';

class HeaderBar extends React.Component {

    render () {
        const style = {
            backgroundImage: `url(data:image/svg+xml;utf8,${LogoSvg})`,
            width: '500px',
            height: '500px'
        };

        return (
            <div style={style}>

            </div>
        );
    }
}

export default Radium(HeaderBar);

Я использую webpack 4 с: 

 test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]

Ответы [ 2 ]

1 голос
/ 04 июня 2019

Я думаю, это потому, что react-svg-loader вернет компонент React, который отображает встроенный svg.Вы просто хотите встроенный SVG, если вы используете изображение данных.Возможно, вместо этого попробуйте svg-inline-loader.

0 голосов
/ 04 июня 2019

Я считаю, что он не может найти путь к вашему svg-изображению из-за data:image/svg+xml;utf8, перед ним. Это будет работать, если вы измените его на: 

const style = {
        backgroundImage: `url(${LogoSvg})`,
        width: '500px',
        height: '500px'
};

или встроенный: 

<div style={{backgroundImage: `url(${LogoSvg})`}>
...