Question

我想为标题部分添加背景图片，而我这样做的方式是：

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

<块引用>

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

2021 年 3 月 19 日更新

关于在 .css 文件中使用。

它似乎是 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-rewired （您可以在 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" } （在 root级别) )

Answer 2

您可以将该图像导入为

import Background from './Screenshot_11.png'

并使用

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

Answer 3

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

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

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

3 个答案: