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

Posted 2023-02-22

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

【英文标题】：React path to public folder in css background image

【发布时间】：2019-11-28 08:58:33

【问题描述】：

我正在使用 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",

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

【问题讨论】：

~ 通常指向您操作系统上的默认位置（我认为）。你试过这个：background-image: url('./Screenshot_11.png');

也不工作

【参考方案1】：

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

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

编辑 2021

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

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

【讨论】：

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

您需要在开发者工具中查看您的网络选项卡，看看您请求的路径可能对您有所帮助

对于像我这样努力使他们在 SRC 文件夹中的 CSS 与他们在 PUBLIC 文件夹中的图像一起工作的人，请参阅建议背后的解释，将图像移动到 SRC 文件夹 github.com/facebook/create-react-app/issues/… 如在链接，“您不应该在公共场合需要图像；构建过程将在编译时将图像从 src/ 复制到 build/ （并相应地更新路径）。”

@JamesHubert 请在这不起作用时向我们发送一个示例

【参考方案2】：

您可以将该图像导入为

import Background from './Screenshot_11.png'

并使用

background-image: `url($Background)`

【讨论】：

帮助我处理 react-scripts v4 和 styled-components。谢谢。

【参考方案3】：

这仍然不适用于公用文件夹中的图像。

2021 年 3 月 19 日更新

关于在.css文件中使用。

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

这里是github repo上对应的issue：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”（在根级别））