React Slider не показывает изображение - PullRequest
Новая
       14

React Slider не показывает изображение

0 голосов
/ 14 февраля 2020

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

import React from 'react';
import PropTypes from 'prop-types';
import './HeroImage.css';
import Slider from 'react-slick';
import img from './img.jpg'


const HeroImage = ({ image, title, text }) => {



  var settings = {
    dots: false,
    infinite: false,
    autoplay:false,
    speed: 500,

  };

  return (
           <div >
              <Slider {...settings}>
                <div className="rmdb-heroimage"
                  style={{
                    background:
                      `linear-gradient(to bottom, rgba(0,0,0,0)
                39%,rgba(0,0,0,0)
                41%,rgba(0,0,0,0.65)
                100%),
                url('${image}'), #1c1c1c`
                  }}
                >
                  {/* this text is showing up but not the image */}
                  <div className="rmdb-heroimage-content">
                    <div className="rmdb-heroimage-text">

                      <h1>{title}</h1>
                      <p>{text}</p>
                    </div>
                  </div>
                </div>
                <div className="rmdb-heroimage"
                  style={{
                    background:
                      `linear-gradient(to bottom, rgba(0,0,0,0)
                39%,rgba(0,0,0,0)
                41%,rgba(0,0,0,0.65)
                100%),
                url('${image}'), #1c1c1c`
                  }}
                >
                  <div className="rmdb-heroimage-content">
                    <div className="rmdb-heroimage-text">
                      <h1>{title}</h1>
                      <p>{text}</p>
                    </div>
                  </div>
                </div>


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

HeroImage.propTypes = {
  image: PropTypes.string,
  title: PropTypes.string,
  text: PropTypes.string
};

export default HeroImage;
...