React中使用backgroundImage为div设置背景图不显示如何解决

背景图无法显示的核心原因是backgroundImage属性的路径拼接语法错误，浏览器会直接静默丢弃无效的CSS属性值，因此不会抛出JS层面的运行报错。
当前代码的拼接逻辑：

backgroundImage: `url({${img}})` 

最终渲染到页面的CSS样式为background-image: url({实际图片地址});，url()函数内部多包裹了一层多余的大括号{}，浏览器无法识别这个非法路径，不会发起图片资源请求。

删除路径拼接时多余的大括号即可，正确写法：

<div id='image' style={{ 
  backgroundImage: `url(${img})` 
}}></div>

修正语法后如果仍无法显示，可检查两个常见问题：

• 为id为image的div设置明确的宽高属性，无宽高的块级元素默认尺寸为0，即使背景图加载完成也无法在页面呈现
• 确认传入的img值为可访问的有效地址：如果是项目本地存储的图片，不要直接给img传相对路径字符串，需要先通过import语法导入图片，或是将图片放在public目录下使用绝对路径引用，否则打包工具无法正确解析资源路径。

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