使用grid布局时图片无法显示是什么原因？

下面是React项目中图片加载失败的高频排查点，可逐一核对：

• 路径引用错误是最常见的诱因：
  • 存放在public目录的静态资源，直接写根路径即可，例如/assets/xxx.jpg，不要额外添加public前缀
  • 存放在src目录的图片，必须先通过import引入再绑定到img的src属性，不能直接填写相对路径，示例写法：

    import bannerImg from './assets/banner.png'
    // 组件内调用
    <img src={bannerImg} alt="页面横幅" />
    

• 注意路径大小写和后缀名匹配：Windows本地开发环境不区分路径大小写，但部署到Linux类服务器时会区分，例如文件实际名为Banner.PNG但代码中写为banner.png，就会出现本地运行正常、部署后404的问题
• 打开浏览器开发者工具的Network面板，筛选「Img」类型的请求，查看对应图片的请求状态：
  • 返回404：为路径配置错误，直接核对你填写的路径与实际文件存放路径是否一致即可
  • 返回403：资源无访问权限，如果使用的是第三方外链图片，确认对方是否开启了防盗链限制
  • 返回200但依旧无法显示：检查图片文件本身是否损坏，或者后缀名与实际文件格式不匹配
• 如果使用的是动态拼接的图片路径，可在渲染前打印拼接完成的完整路径，确认是否和实际路径一致

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