css - 反应中的内联样式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正在接收一些数据，并且它确实接收到了数据。但是当我将数据放入样式中时，它不会出现在检查它并且它不会收到任何错误。

示例：此处的代码

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

尝试这个：

backgroundImage: "url(" + require("../../img/img.png") + ")"

假设img.png在src (webpack)下的img文件夹中

Answer 3

好的，由于某种原因，您无法为用于容纳返回内容的元素添加样式。所以这就是你要做的：

       <Slider {...settings}>
            {slides.map((item) => {

                return(
                    <div key={item.id} className="sliderImage">
                        <div className="backImage" style={{background:`url(/images/covers/${item.cover})`}}>
                            <div className="slideCaption">
                                <h4>{item.title}</h4>
                                <h1>{item.topic}</h1>
                            </div>
                        </div>
                    </div>
                )
            })}
        </Slider>

我希望这可以帮助您解决问题。;)

Answer 4

我想我明白了。尝试在文件顶部导入图像，然后使用导入变量作为 url。我让它工作： https ://codesandbox.io/s/xvnq2q21w4

import photo from "../img/reed.jpg";

const styles = {
  background: `url(${photo})`
};

Answer 5

下面是我尝试在后台加载图像的示例，它有效:)

   Sample response. Here you can see, I have added require.

    const items = [{
        name: 'hola',
        background: require('./img-placeholder.png')
    },{
        name: 'cola',
        background: require('./img-placeholder.png')
    },{
        name: 'lola',
        background: require('./img-placeholder.png')
    }]

    const renderImages = items.map((val, key) => {
        return <div key={key} >
            <div style={{ background: `url(${placeholder})`, height: 200 }}>
            <div className="caption">
                        <h4>{val.name} -  {key}</h4>

                </div>
            </div>
        </div>
    });

注意： require() 方法用于加载和缓存 JavaScript 模块。因此，如果您想将本地的相关 JavaScript 模块加载到 Node.js 应用程序中，您可以简单地使用 require() 方法。

Answer 6

您缺少定义：

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 }}>

Answer 7

您必须将文件顶部的图像导入为

import myimage from './images/covers/imagename';

您也可以使用动态导入，例如：

 import(`${path}`)
  .then(module => this.setState({ module: module.default }))

然后您可以使用图像，其中封面将是导入名称，例如：

<Slider {...settings}>
        {slides.map(function(item){
         import(`${path}`)
         .then(module => 

            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>