为什么旋转木马中没有显示背景图像？

Question

我在我的演示应用程序中使用了这个carousel react-responsive-carousel。但是我的旋转木马背景图像显示不正确。以下是我的代码

https://codesandbox.io/s/late-moon-d27jc?file=/src/App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
export default function App() {
  return (
    <div className="App">
      <Carousel>
        <div
          style={{
            backgroundImage:
              'url("https://st.depositphotos.com/1073642/1263/i/600/depositphotos_12639328-stock-photo-glass-of-water-isolated-on.jpg")'
          }}
        >
          <div>1</div>
        </div>
        <div
          style={{
            backgroundImage:
              'url("https://images-na.ssl-images-amazon.com/images/I/61uYglgYmgL._SY550_.jpg")'
          }}
        >
          <div>2</div>
        </div>
        <div
          style={{
            backgroundImage:
              'url("https://www.shaze.in/pub/media/catalog/product/w/i/wine-glasse--_2__1.jpg")'
          }}
        >
          <div>3</div>
        </div>
      </Carousel>
    </div>
  );
}

Answer 1

您将需要调整一些其他父类尺寸来使其恰到好处，但这至少应该能让您继续下去，并回答为什么图像没有显示的问题:您需要给它们提供高度和宽度。将你想要的尺寸添加到每个样式标签中，你就可以上路了。当然，您可能应该在某个时候将它们移动到样式表中。:)

      style={{
        'height': '400px',
        'width': '300px',
        'backgroundSize': 'cover',
        backgroundImage: 'url("https://st.depositphotos.com/1073642/1263/i/600/depositphotos_12639328-stock-photo-glass-of-water-isolated-on.jpg")'
      }}