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

【问题标题】：inline style css background in react not showing反应中的内联样式css背景不显示
【发布时间】：2018-10-31 16:15:49
【问题描述】：

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

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

示例：code here

【问题讨论】：

你可以试试 backgroundImage 代替背景？如果您发布 jsfiddle，我可以提供更多帮助。
@BenLorantfy 我会尝试发帖，但我使用的是 json-server
尝试在浏览器中直接打开生成的图片url：localhost:3000/images/covers/cover-slug.png，检查路径是否正确
@PedroFernandes 试了一下是对的
尝试在 url 中的图片前添加斜杠

标签： css reactjs react-slick

【解决方案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>

这样我就搞定了。

【讨论】：

欢迎来到 SO！请知道答案需要解释。

【解决方案2】：

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

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

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

【讨论】：

呃，我从表检查 db.json 中获取文件名，与 item.id 内联
哦，是的，对不起。我会继续寻找
我认为这是解决方案：stackoverflow.com/a/30868078/6172657
你能分享你的 webpack 配置吗？我猜如果（1）webpack 正确地转译文件，并且（2）你有正确的转译路径，你可以让它工作。
在哪里可以找到？抱歉，我对此很陌生。

【解决方案3】：

Below 是我尝试在后台加载图像的示例，它成功了 :)

   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() 方法。

【讨论】：

【解决方案4】：

你缺少定义：

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>

更新：正如您在 cmets 中提到的，路径来自公用文件夹，使用 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 }}>

【讨论】：

我在style.css下定义了
是的，不走运。但如果我尝试它确实会出现。
是的，我检查了完全相同的路径。它确实出现在
codesandbox.io/s/5v0308l68k 给你，我无法上传图片文件夹说它未经身份验证？
找不到模块：无法解析“./images/covers”这是我收到的

【解决方案5】：

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

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>

【讨论】：

呃，我使用 map() 访问路径，因为我的 db.json 下有文件名
是的，没关系，只需在使用前通过动态导入导入文件，并使用导入名称来使用图像或其他媒体

【解决方案6】：

试试这个：

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

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

【讨论】：

【解决方案7】：

好的，由于某种原因，您不能将样式添加到用于容纳 return 内容的元素中。所以这就是你要做的：

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

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

【讨论】：