时间戳

首页 > 解决方案 > 如何将本地文件夹中的背景图像添加到容器中

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

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

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

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

标签： javascriptcssbackground-imagejsx

解决方案

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

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

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

推荐阅读