在 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",

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

原文由 Freestyle09 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

编辑 2021

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

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

原文由 Freestyle09 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将该图像导入为

import Background from './Screenshot_11.png'

并使用

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

原文由 Sabesan 发布，翻译遵循 CC BY-SA 4.0 许可协议