使用 ReactJS 在 CSS 文件中使用图像

Question

我的src/assets/imagesReactJs 项目中的文件夹中有一个图像。如何在不使用相对路径的情况下在 CSS 文件中将其用作背景图像？

我在 js 文件中jsconfig.json的src文件夹中添加了compilerOptions.baseUrl我可以执行的操作：

import logo from 'assets/images/logo.svg'
<img src={logo} />

但是css文件呢？我有几个文件夹，我想避免像这样丑陋的字符串

background-image: url(../../../assets/images/logo.svg)

我正在使用 React 16.8.6

编辑：我使用了 create-react-app，所以我没有暴露 webpack 文件，应该避免弹出。

Answer 1

您可以使用 （。/） 。Webpack 自动链接图像，例如：-

.user-background{
    background: url("./images/all-bg-title.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
  }

上图（all-bg-title.jpg）位于文件夹/src/images/all-bg-title.jpg

反应文档链接在这里