React JS中添加img渲染代码后页面空白、图片不显示该如何修复？

你遇到的全页空白不是图片加载失败导致的，是JSX 语法错误直接触发了应用渲染崩溃，核心错误点有两个：

• JSX 的标签属性必须书写在开标签的尖括号内部，你现在的代码把 src、alt 全部写在了 <img> 开标签的尖括号外面，相当于把 JS 属性当成了图片标签的文本子节点，直接触发解析报错。如果是原生HTML写错位的属性，浏览器会做容错自动修正，但JSX编译流程没有这类容错逻辑，遇到非法语法直接中断编译。
• img 属于无内容的空标签，在 JSX 中必须按照自闭合规则书写，不能单独拆分出 <img> 开标签和 </img> 闭合标签，这种写法会进一步加重解析错误。
  React 遇到未被错误边界捕获的渲染阶段异常时，会直接卸载整个根节点的渲染内容，最终表现就是全页空白，此时根本走不到图片资源加载的流程。

把所有属性移回 <img> 开标签的尖括号内部，按照 JSX 自闭合规范改写代码即可：

<img
  src="https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"
  alt="经典美式芝士汉堡"
/>

注：你原来代码里给 src 套的 src={"..."} 写法本身是合法的（本质是把字符串作为JS表达式传入），但完全没必要，直接写字符串即可；把 alt 设为空字符串虽然语法合法，但对屏幕阅读器等无障碍支持不友好，建议补充简短的图片描述文本。

• 遇到全页空白优先打开浏览器开发者工具的控制台面板，这类语法错误会直接在控制台抛出明确的报错信息，定位到对应代码行即可快速修复。
• 可以给应用配置全局错误边界，避免小的渲染异常直接导致全页空白，既提升开发调试效率，也能在生产环境给用户展示降级内容，减少体验损失。

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