Question

这是我的组成部分。当我从JSX中使用SVG时，它呈现为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
            }
          }
        ]

Answer 1

我相信是因为localhost:3000将返回一个React组件，该组件呈现一个内嵌svg。如果您使用的是数据图像，则只需要内嵌svg。也许可以尝试使用svg-inline-loader。

Answer 2

我相信它无法找到您的svg图像的路径，因为它前面有data:image/svg+xml;utf8,。如果将其更改为：

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

或内联：

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

React和SVG。适用于JSX，在样式

2 个答案: