移动端img内联样式失效：生产环境样式消失求助

我在React项目中给img标签添加了内联样式，开发环境下正常生效，但生产环境的移动端浏览器中样式完全消失，渲染后的img标签没有style属性。

相关代码如下：

<img 
 ref={...} 
 loading="lazy" 
 className="rounded mx-auto d-block"
 src={...}
 alt="..."
 style={{
 width: '100px',
 padding: '20px',
 objectFit: 'contain',
 }}></img>

最终生产环境渲染出的标签：

<img loading="lazy" class="rounded mx-auto d-block" src="..." alt="...">

已尝试过更新meta标签、确认无媒体查询干扰、验证内联样式优先级、清除缓存/无痕模式，均未解决问题。

可能的原因及解决办法 #

1. 检查构建工具的过度优化配置 #

• 生产环境下Webpack/Vite等构建工具的压缩插件可能误将内联style对象判定为无用代码移除：
  • 若使用Vite，查看vite.config.js中的build.minify配置，避免使用过于激进的压缩规则；
  • 若使用Webpack，检查TerserPlugin的配置，确认未开启移除未使用对象属性的规则。

2. 验证React生产环境渲染优化的影响 #

• 尝试将内联style对象提取为组件外部的常量，避免每次渲染重新创建对象导致的优化异常：

  // 组件外部定义常量
  const IMG_STYLE = {
    width: '100px',
    padding: '20px',
    objectFit: 'contain',
  };
  
  // 组件内使用
  <img 
    ref={...} 
    loading="lazy" 
    className="rounded mx-auto d-block"
    src={...}
    alt="..."
    style={IMG_STYLE}
  ></img>
  

3. 排查第三方图片处理库的干扰 #

• 若使用了懒加载、图片优化类的第三方库（如react-lazyload、next/image等），这些库可能在生产环境替换原生img标签，导致内联样式丢失。检查库的文档，确认是否需要手动传递style属性到最终渲染的img标签上。

4. 检查移动端特定构建逻辑 #

• 确认是否存在针对移动端的条件编译逻辑，比如通过环境变量判断生产环境+移动端时，意外移除了style属性。检查项目中的构建脚本或条件渲染代码。

5. 用CSS类替代内联样式验证 #

• 暂时将内联样式转为CSS类，测试生产环境移动端是否生效，以此定位问题根源：

  .custom-img-style {
    width: 100px;
    padding: 20px;
    object-fit: contain;
  }
  

  <img 
    ref={...} 
    loading="lazy" 
    className="rounded mx-auto d-block custom-img-style"
    src={...}
    alt="..."
  ></img>
  

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