reactjs - 如何使用外部CSS在Reactjs中设置背景图片？

Question

我有一个使用 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) Error: Can't resolve '/images/bg-hero-mobile.svg' in 'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'

这是我的文件结构:

Answer 1

Error: Can't resolve '/images/bg-hero-mobile.svg' in 'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'

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

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

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

或者您可以简单地将images文件夹放在src目录下。