时间戳

首页 > 解决方案 > 反应中的内联样式css背景不显示

css - 反应中的内联样式css背景不显示

问题描述

我的代码有什么问题？这是一个滑块：

<Slider {...settings}>
            {slides.map(function(item){
                return (
                    <div key={item.id} className="item-slider" 
                        style={{background: `url(images/covers/${item.cover})`}}>
                        <div className="caption">
                            <h4>{item.topic}</h4>
                            <p>{item.title}</p>

                        </div>
                    </div>
                    )  
            })}
        </Slider>

我正在使用react-slick，我测试了它是否item.cover正在接收一些数据，并且它确实接收到了数据。但是当我将数据放入样式中时，它不会出现在检查它并且它不会收到任何错误。

示例：此处的代码

标签： cssreactjsreact-slick

解决方案

我有同样的问题，尝试将每张幻灯片包装成这样的 div：

<Slider {...settings}>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${House})`}} />
   </div>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${Map})`}} />
   </div>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${NotAvailable})`}} />
   </div>
</Slider>

这样我就让它工作了。

推荐阅读