如何使用外部css在react js中设置背景图像？答案

【问题标题】：How to set the background image in react js using external css?如何使用外部css在react js中设置背景图像？
【发布时间】：2021-11-19 18:30:10
【问题描述】：

我正在尝试通过外部 css 将图像设置在容器的背景中，但它说找不到模块，我应该在 background-image 中给出的正确路径是什么......

     import React from 'react'
import './Login.css'
const Login = () => {
    return (
        <>
        <div className="container-fluid img-wrapper bg-danger">
        </div>
        </>
    )
}
export default Login

  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
     .img-wrapper{
        background-image:url(../public/login-bg.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        height:100vh;
    }

【问题讨论】：

您的img-wrapper 元素在哪里？没有与该类匹配的任何元素
很抱歉，是的，img-wrapper 元素在主 div 中具有容器流体类，我试图进行更改所以错误地我没有在这里写
您是否也尝试将width 添加到您的 div 中？
@orotype 是的，我也试过了，但是当我尝试插入在线图像时，错误是路径原因，它工作正常
对不起，兄弟，如果没有有关您的目录组织和其他文件的更多信息，我们无法为您提供帮助

标签： javascript html css reactjs

【解决方案1】：

您似乎面临与此问题相同的问题： Use images in CSS files with ReactJS

您可以将照片添加到您的公共文件夹中，因为那里提供了服务器。如本 Codesandbox 中提供的：https://codesandbox.io/s/agitated-turing-gsnr3?file=/src/styles.css

【讨论】：