Javascript 如何将本地文件夹中的背景图像添加到容器中

我想从本地文件夹中的图像设置容器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

类团队扩展了React.Component{
render（）{
让样式={
背景重复：“不重复”，
背景图片：'url（../images/Football_Field.png”），
背景尺寸：“100%100%”，
背景位置:"中锋",，
宽度：“100%”，
高度：“100%”，
边框：“2个虚线#333”
}
返回(
)
}
}
导出默认团队

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

Team

components文件路径为“/src/components/Team”

---

如果我改为使用ui容器类，还有人知道如何执行此操作吗？

您可以在渲染方法中执行类似操作：） 要知道，一旦编译路径，它就在公用文件夹中扎根

render（）
{
const image='./images/tasse_kandinsky.webp'；
返回(
)
}

根据您的网页配置，您可以执行以下操作：

import backgroundImage from "../images/Football_Field.png";

class Team extends React.Component{
    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url(' + backgroundImage + ')',
            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

从“./images/Football_Field.png”导入背景图像；
类团队扩展了React.Component{
render（）{
让样式={
背景重复：“不重复”，
backgroundImage:'url（'+backgroundImage+'），
背景尺寸：“100%100%”，
背景位置:"中锋",，
宽度：“100%”，
高度：“100%”，
边框：“2个虚线#333”
}
返回(
)
}
}
导出默认团队

否则，请将您的图像添加到公用文件夹，并相应地更改url。

这可能会有所帮助->

---

你只需要一个静态文件夹来提供资产，如果你使用create react app，你只需要将你的图像放在公用文件夹中，然后按照上面的文档操作。

为什么要在url（）内使用

backgroundImage

两边的两个+运算符？@Sean这只是一个字符串连接。某些网页包配置允许您在js文件中导入图像。在构建时，导入的图像将与其余图像一起复制到构建文件夹中，并将其在javascript文件中的值替换为文件的相对路径。因此，在上面的示例中，变量

backgroundImage

将被设置为带有图像URL的字符串。