react中动态渲染背景图片

最新推荐文章于 2024-07-09 00:33:30 发布

riguangzhixia

最新推荐文章于 2024-07-09 00:33:30 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/riguangzhixia/article/details/104697623

版权

图片大小不一样，而盒子大小一样，那么为了避免图片变形显示，这时候就最好使用背景图。

react中循环遍历背景图核心代码：

render() {
        return (
            <div className="act">
                活动
                {
                    this.state.data.map((item, index) => {
                        return <div className="picture" key={index}
                            style={{ background: `url('${item.img}') center center /cover` }}>
                            背景图片
                        </div>
                    })
                }
            </div>
        )
    }

效果如下：