ReactJS中使用img标签设置背景图报错求助

首先，你的代码存在两个核心问题，导致了错误抛出：

1. style属性的语法错误：在JSX的style对象中，你错误地用{}包裹了变量obj.producer_info.avatar_url。外层的{}已经表示进入JavaScript执行上下文了，内部直接写变量名即可，不需要额外嵌套大括号。
2. img标签的使用逻辑矛盾：img标签本身是通过src属性展示图片的，同时设置background背景图会造成视觉重叠，这不符合常规的图片展示逻辑——通常我们会用div来承载背景图，或者只保留一种图片展示方式。

修正方案一：修复语法并保留img标签（不推荐，但可运行） #

如果你坚持要用img标签的style设置背景图，修正后的代码如下：

<img 
  className="user-avatar" 
  style={{ background: `url(${obj.producer_info.avatar_url})` }} 
  id="first-user" 
  src="img/fillavt.png" 
/>

这里改用ES6模板字符串拼接URL，比+拼接更简洁易读，同时移除了多余的{}包裹变量。

修正方案二：改用div展示背景图（推荐） #

既然目标是展示背景图，用div作为容器更符合语义。同时可以添加占位图的容错处理，示例代码：

<div 
  className="user-avatar" 
  style={{ 
    backgroundImage: `url(${obj.producer_info.avatar_url})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    width: '100px', // 根据需求设置尺寸
    height: '100px'
  }} 
  id="first-user"
>
  {/* 背景图加载失败时显示占位图 */}
  <img 
    src="img/fillavt.png" 
    className="fallback-avatar" 
    style={{ display: 'none', width: '100%', height: '100%' }} 
    onError={(e) => { 
      e.target.style.display = 'block'; 
      e.target.parentElement.style.backgroundImage = 'none'; 
    }} 
  />
</div>

额外提示 #

• 确保obj.producer_info.avatar_url是有效的URL（完整的http/https链接或正确的相对路径），否则背景图会加载失败。
• React中style属性的CSS属性需用驼峰命名法，比如backgroundImage（不过background简写也可正常生效）。

内容的提问来源于stack exchange，提问作者Trần Mạnh Cường