встроенный стиль 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

Хорошо, по какой-то причине вы не можете добавить стиль к элементу, который вы используете для размещения 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>

Надеюсь, это поможет вам решить вашу проблему.;)

Answer 2

Попробуйте:

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

при условии, что img.png находится в папке img в папке src (webpack)

Answer 3

Вы должны импортировать изображение в верхней части файла как

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>

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

Я думаю, что понял.Попробуйте импортировать изображение вверху файла, а затем использовать переменную импорта в качестве URL-адреса.Я получил его на работу: https://codesandbox.io/s/xvnq2q21w4

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

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

Answer 6

Вам не хватает определения:

require()

height image

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