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

Answer 3

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

<?php

function storeError($message) {
  if(!isset($_SESSION['error_message'])) {
    $_SESSION['error_message'] = array();
  }

  if(is_array($message)) {
    $_SESSION['error_message'] = array_merge($_SESSION['error_message'], $message);
  } else {
    $_SESSION['error_message'][] = $message;
  }
}

storeError('test');
storeError(array(
    "address" => "is a required field",
    "city"=> "is a required field",
    "state" => "is a required field"
    ));
print_r($_SESSION['error_message']);

====>
Array
(
    [0] => test
    [address] => is a required field
    [city] => is a required field
    [state] => is a required field
)

Answer 4

以下是我尝试在后台加载图片的示例，它可以工作:)

   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 5

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

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

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

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

然后你可以使用image，其中cover将是导入名称，如：

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

Answer 6

尝试一下：

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

假设 img.png 位于 src （Webpack）下的 img 文件夹中

Answer 7

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

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

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

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

7 个答案: