在css背景图像中反应公共文件夹的路径

Question

我正在使用 Create-React-App 并且我想为我的标题部分添加背景图像，我是这样做的：

background-image: url('~/Screenshot_11.png');

在此之后，我收到此错误：

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!. /node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss) 找不到模块：您试图导入 ../../。 ./../../../../Screenshot_11.png 位于项目 src/ 目录之外。不支持 src/ 之外的相对导入。

我在 package.json 中设置了主页

"homepage": "http://localhost:3000",

在我的旧项目中，但今天我无法正确导入它。

Answer 1

他们已经改变了，但我不知道为什么。工作路径：

background-image: url('/Screenshot_11.png');

编辑 2021

对于认为它不起作用的人：

https://codesandbox.io/s/agitated-turing-gsnr3

Answer 2

对于公共文件夹中的图像，这仍然对我不起作用。

2021 年 3 月 19 日更新

关于在 .css 文件中使用 <ROOT/public/images>。

这似乎是 create-react-app (react-scripts) 包 v4.x 中的一个重大更改（将被视为错误？）。
更准确地说，在包 'css-loader' v4.x 中。
3.x 分支可以正常工作。

这是 github repo 上的相应问题：
https : //github.com/facebook/create-react-app/issues/9870
（实际上还有几个）。

没有修复（还）。（将是？..）
但是那里提到了一些解决方法。使用哪一个...这取决于你的项目，我想。

一些解决方法：

• 降级到 react-scripts 3.4.x

• 不要在 CSS 文件中使用 url :) 您仍然可以在 .JSX（内联样式）中使用。或者放入.html。它们显然不是由 css-loader 处理的。

• 重新配置 webpack 以将 url:false 添加到 css-loader 选项（弹出 CRA 或使用此：https : //github.com/gsoft-inc/craco或此：https : //github.com/timarney/react-app-重新接线 （您可以在 github 问题页面上找到示例配置）

• 使用 css-loader https://github.com/webpack-contrib/css-loader/pull/1264 的这个新功能 （发布于 5.1.0，当前最新版本是 5.1.3；要使用该版本，您可以添加跟随 package.json: "resolutions": { "css-loader": "5.1.3" } (在根级别) )

Answer 3

您可以将该图像导入为

import Background from './Screenshot_11.png'

并使用

background-image: `url(${Background})`