React项目中图片可加载但显示为0x0无法正常渲染问题求助

• 核心错误1：img标签的资源属性书写错误，你使用了不存在的url属性指定图片地址，正确的属性名是src，img标签无法识别url属性，自然不会加载渲染图片，导致尺寸为0x0。
• 核心错误2：React中指定DOM元素的类名需要使用className属性而非class，虽然部分React版本做了兼容，但非常规写法可能引发样式异常。

修复步骤 #

1. 修正img标签属性
   如果图片存放在public目录下，将img标签修改为以下写法，额外添加alt属性避免控制台可访问性告警：

<img 
  style={{width:'100%', height:'auto'}} 
  className='img' 
  src='/images/iwatch.jpg'
  alt={cat.name}
/>

如果使用src目录下的图片导入写法，对应修改为：

// 顶部导入
import iwatch from './images/iwatch.jpg';

// 组件内使用
<img 
  style={{width:'100%', height:'auto'}} 
  className='img' 
  src={iwatch}
  alt={cat.name}
/>

2. 排查样式冲突
   你提到相同img标签在App组件可正常显示，可按以下顺序排查当前组件的CSS规则：

• 检查父容器.image、.card类的CSS规则，确认没有设置width:0、height:0、overflow:hidden、display:none这类会隐藏内容的属性
• 检查.img类的自定义样式，确认没有设置display:none、visibility:hidden、opacity:0等规则
• 可临时给img添加minWidth: '100px', minHeight: '100px'的内联样式，排除父容器尺寸限制导致的图片被压缩隐藏问题

3. 验证图片路径
   打开浏览器开发者工具的网络面板，刷新页面查看对应图片的请求状态：

• 如果返回404，说明路径配置错误，public目录下的资源引用路径以public为根目录，确认图片存放路径为public/images/iwatch.jpg即可匹配src='/images/iwatch.jpg'的写法
• 如果返回200，说明图片加载正常，按上述两个步骤排查即可

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