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

Question

我的代码中有什么问题这是一个滑块:

<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正在接收一些数据.它确实如此.但是当我坚持它的风格它没有出现并检查它,并没有收到任何错误.

示例:代码.codesandbox.io/s/5v0308l68k(无法上传图片)

Answer 1

我遇到了同样的问题，尝试将每张幻灯片包装成这样的 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>

这样我就让它工作了。

Answer 2

您缺少定义：

require()

height图像

backgroundRepeat

<Slider {...settings}>
            {slides.map(function(item){ 
               console.log(item.cover, 'check this');
                return (
                <div key={item.id} className="item-slider" style={{
                  background: 'url(' + require(`./images/covers/${item.cover}`) + ')', backgroundRepeat: 'no-repeat', height: 300 }}>
                  <div className="caption">
                    <h4>{item.topic}</h4>
                    <p>{item.title}</p>
                  </div>
                </div>
                    )  
            })}
        </Slider>

更新：正如您在评论中提到的，路径来自公用文件夹，用于process.env.PUBLIC_URL访问公用文件夹

  <div key={item.id} className="item-slider" style={{
                    background: 'url(' + process.env.PUBLIC_URL +`/images/covers/${item.cover}` + ')', backgroundRepeat: 'no-repeat', height: 300 }}>