React JS使用外部CSS设置背景图时报模块未找到如何解决？

报错原因 #

你当前的写法触发错误是因为React构建工具（CRA/Vite等）的静态资源处理规则限制：

• public目录下的资源会被直接映射到服务的根路径，不会参与CSS的打包路径解析
• 你在CSS中写../public/login-bg.png时，打包器会按照CSS文件的相对路径去查找资源，而public目录默认不在构建解析的范围内，因此抛出模块未找到错误

正确写法（二选一即可） #

方案1：直接引用public目录下的图片 #

直接写根路径即可，不需要携带../public前缀：

.img-wrapper{
    background-image:url(/login-bg.png);
    /* 其余属性保持不变 */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height:100vh;
}

注意：如果你的应用部署在域名子路径下（比如https://xxx.com/myapp/），CRA项目可以写为url(%PUBLIC_URL%/login-bg.png)，Vite项目可以在配置里指定base路径后直接写根路径即可。

方案2：把图片放在src目录下引用 #

更推荐的写法，避免子路径部署问题：

1. 把login-bg.png放到src的资源目录下，比如src/assets/images/login-bg.png
2. CSS中按照相对当前CSS文件的路径写即可，比如你的CSS文件在src/pages/Login.css，就写：

.img-wrapper{
    background-image:url(../assets/images/login-bg.png);
    /* 其余属性保持不变 */
}

你也可以选择在React组件中导入图片后用行内样式设置：

import React from 'react'
import loginBg from '../assets/images/login-bg.png'
import './Login.css'
const Login = () => {
    return (
        <>
        <div className="container-fluid img-wrapper bg-danger" style={{backgroundImage: `url(${loginBg})`}}>
        </div>
        </>
    )
}
export default Login

内容的提问来源于stack exchange，提问作者mujtaba hussain