css - 在 ReactJS 中使用 CSS 文件中的图像

Question

我的 ReactJs 元素中的 src/assets/images 文件夹中有一张图片。 如何在不使用相对路径的情况下在 CSS 文件中将其用作背景图像？

我在 jsconfig.json 中添加了 compilerOptions.baseUrl 中的 src 文件夹，所以在 js 文件中我可以这样做:

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

但是 css 文件呢？我有几个文件夹，我想避免像

这样的丑陋字符串

背景图片: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

React 文档链接 here