React项目引用public文件夹图片作为背景图不显示且编译失败求助

解决方案 #

你遇到的编译报错和背景图不显示问题可以按以下步骤排查修复：

1. 首先修正代码里的非法转义字符
   你粘贴的代码里的<、>是HTML转义后的字符，不属于合法的JSX语法，需要全部替换为正常的尖括号<、>，否则会直接触发编译失败。
2. 修复CSS中的图片路径引用错误
   你将图片存放在public目录下，src目录中的CSS文件直接写/images/img-2.jpg路径时，webpack编译会默认在src目录下查找资源，找不到就会报错，可选择以下任意一种方案修复：

• 方案一：保留图片在public目录，修改CSS路径
  在路径前添加%PUBLIC_URL%前缀指明资源属于public目录：

.services {
 background-image: url('%PUBLIC_URL%/images/img-2.jpg');
}

• 方案二：将图片移入src目录引用
  新建src/assets/images目录，把img-2.jpg移动到该目录下，再修改CSS路径为相对路径即可：

.services {
 background-image: url('./assets/images/img-2.jpg');
}

修改完成后重新启动开发服务即可正常显示背景图片。

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