在React组件中设置背景图像

Question

我目前正在处理这个转型片段，我希望将这些框的背景更改为图像，而不是渐变。然而，这似乎不起作用。

 <div
          className="element"
                style={{
                width: element.width,
                height: element.height,
                backgroundImage: this.state.backgroundImage,
                ...styles,
                }}
                                        
 >

import BackgroundImage from './door1.png';
...
...
constructor(props) {
        super(props);
        this.state = {
            elements: [
                {
                    id: "el-3",
                    x: 100,
                    y: 225,
                    scaleX: 1,
                    scaleY: 1,
                    width: 100,
                    height: 100,
                    angle: 0,
                    backgroundImage: {BackgroundImage},
                    classPrefix: "tr2",
                    text: "Scale Disabled",
                    styles: {
                        padding: 5,
                    },
                    disableScale: false,
                },
            ],
            offsetX: 40,
            offsetY: 20,
            zoom: 1,
        };

        this.workspaceRef = React.createRef();
    }

有什么想法吗？我也试着做这样的事情：设置背景-反应中的图像，Syled组件背景图像反应，将背景图像设置为“反应”中的支柱

但这似乎不管用

我还试着把它放在div里面，就像这样：

<div
    className="element"
    style={{
        width: element.width,
        height: element.height,
        backgroundImage: this.state.backgroundImage,
        ...styles,
    }}
    
>
    <img src={element.backgroundImage.BackgroundImage} />
    {element.text}
</div>

但结果却是这样：门

Answer 1

只是一个小小的改动

更改json对象，如

...
    backgroundImage: BackgroundImage, //without curly braces
....

在div中

    style={{
       ....
       backgroundImage: `url("${element.backgroundImage}")`,
       ...styles
    }}

检查它，这里