在 React 组件中设置背景图像

Question

我目前正在摆弄这个transformationsn-p，我想将框的背景更改为图像，而不是渐变。但是，它似乎不起作用。

 <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();
    }

有什么想法吗？ 我也尝试做这样的事情： Setting Background-Image in React , Syled Components Background Image React , Setting background image as prop in react

但它似乎不起作用

我也试过把它放在div里面，像这样：

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

但它最终看起来像这样： Door

Answer 1

稍微修改一下

更改您的 json 对象，例如

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

在 div 中

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

查看here