如何使用外部 css 在 Reactjs 中设置背景图像？

Posted 2023-03-06

【中文标题】如何使用外部 css 在 Reactjs 中设置背景图像？

【英文标题】：How to set background image in Reactjs using external css?

【发布时间】：2021-04-03 21:14:24

【问题描述】：

我有一个使用 create-react-app 创建的应用，我想设置标题元素的背景图像。我尝试在 Home.css 中使用外部 CSS，并使用以下代码从 Home.js 导入它：

header
background-image: url(./images/bg-hero-mobile.svg);

上述方法向我显示此错误：

./src/Home.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/Home.css) 错误：无法解析“/images/bg-hero-mobile.svg” 'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'

这是我的文件结构：

【参考方案1】：

错误：无法解析“C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src”中的“/images/bg-hero-mobile.svg”

这是一个路径问题。 webpack 无法在给定路径上找到文件，即文件在提供的路径上不存在。

根据当前应用结构给出路径

header
background-image: url(../public/images/bg-hero-mobile.svg);

或者你可以简单的把images文件夹放到src目录下。

【参考方案2】：

由于create-react-app v4.0.1 的新版本无法通过css 文件访问图像，但您可以从jsx 和inline css 访问它。如果您想访问图像、字体等资源，您必须将它们放在src 文件夹中。在这种情况下，我必须将 images 文件夹移动到 src 文件夹并使用此代码来访问它：

header
background-image: url(./images/bg-hero-mobile.svg);