执行npm run build编译失败：React项目背景图片路径问题求助

方案1：使用src目录内的图片，修正路径解析 #

如果你的图片放在src/assets/images/welcome-image.jpg，在src/assets/scss/style.scss里引用时，可借助Create React App默认支持的@别名（指向src目录）来避免路径解析混乱：

.home-image-container {
  background-image: url("~@/assets/images/welcome-image.jpg");
}

或者用~强制从项目根目录解析路径，避免第三方样式（比如bootstrap）影响路径上下文：

.home-image-container {
  background-image: url("~/src/assets/images/welcome-image.jpg");
}

方案2：使用public目录的图片，正确引用占位符 #

如果图片放在public/welcome-image.jpg，必须用Create React App提供的%PUBLIC_URL%占位符来引用：

.home-image-container {
  background-image: url("%PUBLIC_URL%/welcome-image.jpg");
}

构建时webpack会自动将%PUBLIC_URL%替换为应用部署的公共路径，确保图片能被正确找到。

之前尝试失败的原因 #

1. 直接写/welcome-image.jpg：CSS文件中，webpack会把/开头的路径解析为相对于当前CSS文件所在目录的路径，而非项目根目录，因此出现Can't resolve '../../welcome-image.jpg'错误。
2. 引用../../../public/welcome-image.jpg：Create React App的webpack配置禁止从src/目录外引入资源，这是安全限制，会触发报错。
3. 开发环境正常但构建失败：开发服务器对路径解析更宽松，而生产构建会严格遵循模块规则，导致路径问题暴露。

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