0

我正在尝试在我的 React 应用程序的视频卡中使用上传图标的背景图像，但到目前为止还无法显示背景图像。我看到了我声明的背景颜色，但没有看到背景图像，我不知道为什么。这是相关的代码块：

    <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: '../../assets/images/upload.png',
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code

我还尝试拉图标是一个导入，如下所示：

import { uploadIcon } from '../../assets/images/upload.png';

...然后像这样使用它：

   <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: uploadIcon,
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code

但这也没有用。

顺便说一句，我backgroundImageCardSectionStyles上面提到的看起来像这样：

const backgroundImageCardSectionStyles = {
  root: {
    backgroundPosition: 'center center',
    backgroundSize: 'cover',
    height: 144,
  },
};

我在这里想念什么？

4

1 回答 1

1

在设置背景时尝试url在 CSS 中使用。url()用于在 CSS 中包含文件。

 import UploadIcon from "../image.png"

 <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: `url(${UploadIcon})`,
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code
于 2020-12-08T13:45:20.817 回答