React App 中不显示背景图像

Question

我正在尝试在我的 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,
  },
};

我在这里错过了什么？

Answer 1

设置背景时，请尝试在 CSS 中使用 url。 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

React App 中不显示背景图像

Background Image Not Displaying in React App

css

icons

background-image

reactjs

fluent-ui