React App 中不显示背景图像答案

【问题标题】：Background Image Not Displaying in React AppReact App 中不显示背景图像
【发布时间】：2020-12-08 13:41:11
【问题描述】：

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

我在这里错过了什么？

【问题讨论】：

标签： css reactjs icons background-image fluent-ui

【解决方案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

【讨论】：

这样我得到一个'url' is not defined 错误。是否应该将整个值包含在反引号中而不仅仅是内部部分？
要使其正常工作，您需要将图像的导入更改为 import Image from "../.." 不需要使用 {}。