如何使用外部 css 在反應 js 中設置背景圖像？

Question

我正在嘗試通過外部 css 將圖像設置在容器的背景中，但它說找不到模塊，我應該在背景圖像中給出的正確路徑是什么......

---

     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;
    }



    
     

Answer 1

看起來您面臨與此問題相同的問題： Use images in CSS files with ReactJS

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