React.js 背景图片仅联系我们页面不显示且控制台样式正确

问题根因 #

这是典型的相对路径基准地址匹配错误，你用的images/iletisim.jpeg是相对路径，浏览器会根据当前页面的路由地址来拼接完整的资源请求地址：

• 其他页面路由如果是根路径/，拼接出来的地址是你的站点根地址/images/iletisim.jpeg，刚好匹配资源位置，所以能正常加载
• 「联系我们」页面如果是多层级路由（比如/contact、/about/contact等），拼接出来的地址会变成你的站点根地址/contact/images/iletisim.jpeg，自然找不到对应资源

解决方案 #

按优先级选任意一种即可：

1. 改成绝对路径，直接从站点根目录查找资源
   把代码修改为：

   <div style={{backgroundImage: "url(/images/iletisim.jpeg)"}}>
   

   仅需在路径前加/，就能让浏览器忽略当前路由层级，统一从站点根目录找资源。

2. 导入图片后再使用（适用于图片存放在src目录下的场景）
   先在组件头部导入图片资源：

   import iletisimBg from '你的图片相对src的路径/images/iletisim.jpeg'
   

   再在样式里引用导入的变量：

   <div style={{backgroundImage: `url(${iletisimBg})`}}>
   

   这种方式脚手架会自动处理资源路径，不会受路由层级影响。

3. 适配站点部署到子目录的场景
   如果你的应用后续会部署到域名的子目录下，可以用脚手架提供的公共路径变量拼接：

   <div style={{backgroundImage: `url(${process.env.PUBLIC_URL}/images/iletisim.jpeg)`}}>
   

验证方法 #

打开浏览器开发者工具的「网络」面板，筛选「图片」类型的请求，找到iletisim.jpeg对应的请求，看请求地址是否和预期的资源地址一致，就能快速确认是不是路径问题。

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