图片不显示首要查src路径和控制台报错；90%因路径错误导致404；需区分绝对路径/相对路径基准点、大小写敏感、补全前缀；alt必须有意义或为空；禁用width/height属性，改用CSS控制尺寸与对齐；动态表格必加onerror兜底和loading="lazy"。
图片不显示？先查 src 路径和控制台报错
表格里 <img> 标签没渲染出来，90% 是 src 写错了。浏览器拿到 src 就发请求，404 或 Failed to load resource 直接留白，
- 本地开发时双击 HTML 打开正常、但用 Live Server 后变空白？大概率用了
src="/images/avatar.jpg"——这个/指向服务器根目录，而 Live Server 默认以项目根为根，不是你想象的网站根 - HTML 在
/pages/user.html，图片在/assets/avatars/1.png，正确写法是src="../assets/avatars/1.png"（相对路径以当前 HTML 文件为起点） - 后端返回文件名如
"head_abc.jpg"，前端拼路径漏了前缀，结果请求变成/head_abc.jpg而不是/uploads/head_abc.jpg - 路径区分大小写：Linux 服务器上
Photo.jpg≠photo.jpg，本地 macOS 可能不报错，上线就挂
alt 不是可选字段，而是内容图的强制语义要求
没写 alt 或写成 alt="图片"，不仅影响读屏软件和 SEO，更实际的是：图片加载失败时，用户看到的是一片空白或丑陋的破损图标——alt 是唯一能传递信息的出口。
- 有信息量的图（头像、商品图、数据截图）：
alt="张三的工牌照片，蓝色背景，左下角带员工编号HR2026-789"，具体、无冗余词 - 纯装饰性图（分隔线、背景点缀）：
alt=""（空字符串），明确告诉辅助技术“跳过” - 按钮图标（如删除图标）：
alt="删除该行记录"，描述功能，不是图形外观 - 千万别写
src="x.jpg" alt=""还不加onerror——空src会触发 GET / 请求，污染日志且浪费资源
别用 width/height 属性硬设尺寸，用 CSS 控制更稳
直接写 <img src="a.jpg" width="80" height="80"> 看似简单，但会导致拉伸失真、响应式失效、布局抖动（CLS）。表格单元格里尤其明显：图片一加载，整行高度突变，文字跟着跳。
- 给
<td>加 class，比如<td class="avatar-cell"><img src="..."></td> - CSS 写：
.avatar-cell img { max-width: 64px; height: auto; vertical-align: middle; }——max-width防溢出，height: auto保比例，vertical-align: middle消除默认基线对齐导致的底部空隙 - 避免
display: block，否则图片脱离行内流，和旁边文字无法对齐混排 - 需要等比缩放+裁剪？用
object-fit: cover配合固定宽高容器，而不是靠width/height强制拉伸
动态生成表格时，onerror 和 loading="lazy" 是刚需
JS 拼接 innerHTML 或 React/Vue 渲染表格时，图片加载状态不可控。用户滚动快、网络差、图片多，体验很容易崩。
立即学习“前端免费学习笔记（深入）”；
- 兜底 fallback：
<img src="user.jpg" onerror="this.src='placeholder.svg'" alt="用户头像">，比留白友好得多 - 非首屏图片加
loading="lazy"，浏览器原生懒加载，不用额外 JS 库 - 大量头像？优先压缩为 WebP，尺寸控制在 5KB 以内；再配合 CDN 缓存，别让每张图都走源站
- 服务端返回
null或空字符串当src？前端必须过滤：用src={item.avatar || '/placeholder.svg'}类似逻辑兜住，否则页面会发起一堆 404
alt 有没有真正描述内容、以及图片加载失败时用户看到什么——这三件事没理清，表格里的图永远是半成品。
