为什么背景图片没有出现在轮播中？答案

【问题标题】：Why background image is not appearing in Carousel?为什么背景图片没有出现在轮播中？
【发布时间】：2021-02-28 15:27:56
【问题描述】：

我将这个轮播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>
  );
}

【问题讨论】：

标签： javascript reactjs carousel

【解决方案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")'
      }}

【讨论】：