javascript - 如何将背景图像从本地文件夹添加到容器

Question

我想用本地文件夹中的图像设置容器 div 的背景图像。有谁知道我需要添加什么到我的代码/如何编辑它来做到这一点？目前由于某种原因没有显示图像。

class Team extends React.Component{


    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url("../images/Football_Field.png")',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            width: '100%',
            height: '100%',
            border: '2px dashed #333'
        }

        return (
            <div className="container" style={style}>

                <i className="fas fa-tshirt"></i>
            </div>
        )
    }
}

export default Team

图像位于 src 文件夹内的“图像”文件夹中。 (/src/images/Football_Field.png)

Team 组件文件路径是“/src/components/Team”。

如果我改用 ui 容器类，有人会知道该怎么做吗？

Answer 1

你可以在你的渲染方法中做类似的事情:)知道路径在编译后根植于公用文件夹

     render()
    {
        const image = './images/tasse_kandinsky.webp';
        return(
            <div className='product'>
      
                <div className='product-image' style={{backgroundImage: 'url('+image+')'}}>
                    
                </div>
            </div>
        )
    }