H2标签下图片无法显示请求排查（附HTML/CSS代码）

• 检查图片基础属性
  先确认img标签的src路径是否正确，相对路径要匹配文件层级，绝对路径直接在浏览器地址栏输入测试能否访问。同时检查图片格式是否为浏览器支持的类型（JPG、PNG、WebP等），避免使用无效格式。

• 排查CSS遮挡或隐藏规则

  1. 打开浏览器开发者工具（F12），选中图片元素查看Computed面板：
     • 若display为none，修改CSS将其设为block/inline-block；
     • 若opacity为0，调整为1；
     • 若visibility为hidden，改为visible。
  2. 查看z-index属性，若H2或其父元素的z-index数值更高，给图片设置更高的z-index（注意父元素不能是position: static，否则z-index无效）。
  3. 检查图片所在父容器的overflow属性，若为hidden且图片超出容器范围，会被裁剪，可调整容器尺寸或把overflow改为visible。

• 修正H2标签的布局干扰
  若H2标签设置了float、position: absolute/fixed等脱离文档流的属性，会导致后续图片布局异常：

  • H2用float的话，在图片前添加<div style="clear: both;"></div>清除浮动，或给父容器设置overflow: auto触发BFC；
  • H2用position: absolute的话，调整定位规则，或给图片设置对应的position属性来修正位置。

• 验证DOM结构完整性
  检查img标签是否被嵌套在设置了display: none的容器内，或存在未闭合的标签导致DOM结构错乱，通过开发者工具的Elements面板查看DOM树是否正常。

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