如何在React.js项目中使用外部CSS设置背景图片

React中背景图不生效绝大多数是路径解析错误，你可以根据自己的资源存放位置选择对应写法：

情况1：图片存放在public/assets/images目录 #

public下的资源会被直接映射到网站根路径，外部CSS中直接用根路径绝对路径即可：

/* 示例：你的图片名为background.jpg，存放在public/assets/images下 */
.target-element {
  background-image: url('/assets/images/background.jpg');
  /* 建议补充以下属性避免样式覆盖或布局问题导致不显示 */
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

情况2：图片存放在src/assets/images目录（更推荐，可享受打包压缩、哈希重命名等优化） #

外部CSS中的路径要写相对于当前CSS文件的相对路径，比如你的CSS文件存放在src/css/index.css，图片存放在src/assets/images/background.jpg，写法如下：

.target-element {
  background-image: url('../assets/images/background.jpg');
  /* 其他背景属性同上 */
}

其中../代表向上跳转一级目录，你可以根据自己的文件层级调整相对路径的层级数量。

常见问题排查 #

• 确认路径大小写完全匹配，打包后是区分大小写的，Images和images会被识别为不同路径
• 确认设置背景图的元素有明确的宽高值，元素高度为0时背景图无法显示
• 可以在浏览器地址栏直接输入图片路径验证资源是否存在，比如本地开发时访问http://localhost:3000/assets/images/background.jpg，能正常加载说明路径无误，问题出在样式或布局上

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