Реагируйте пятно, давая пустое фоновое изображение в div внутри - PullRequest
Новая
       17

Реагируйте пятно, давая пустое фоновое изображение в div внутри

0 голосов
/ 29 марта 2020

Я очень новичок в React, я пытаюсь использовать ответное пятно, чтобы получить изображение в качестве фона с каруселью. но когда я пытаюсь сделать это, я становлюсь пустым вместо изображения. я не вижу своего встроенного стиля, когда проверяю. но если я использую тег, который показывает изображение.

enter image description here

ниже код 

import React, { Component } from 'react';
import './home.css';
import Slider from "react-slick";
import image2 from '../../images/image2.jpg';
import image1 from '../../images/image1.jpg';
import image3 from '../../images/image3.jpg';



class Home extends Component{


  render(){

    let pics = [
      {"name":"pic_1",
        "url": image1
      },
      {"name":"pic_2",
        "url": image2
      },
      {"name":"pic_3",
        "url": image3
      }
    ]

    let settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    }
    return(

          <div >
            <Slider {...settings}>
              {pics.map((picture, i)=>{
                return(
                  <div key={i} style={{
                    backgroundSize: 'cover',
                    border: 'none',
                    height: '100vh',
                    backgroundImage: `url(${picture.url})`

                  }}>
                  <div>
                    {picture.name}
                  </div>

                  </div>
                )
              }
            )
          }
            </Slider>
          </div>

    )
  }
}

export default Home;

, я пытаюсь пройти через это ответ Установка backgroundImage с помощью встроенных стилей React , но это не решило мою проблему.

заранее спасибо!

...