纯HTML即可在表格单元格中显示图片，关键需确保src路径有效、alt属性合理、img标签正确嵌套在td/th内；尺寸应通过CSS的max-width和height:auto控制以保比例与响应式；动态生成时须补全路径、处理空值并用onerror降级。
直接把 <img> 标签写进 <td> 或 <th> 里就能显示图片，不需要 JavaScript、不用额外包裹容器，纯 HTML 就够用——前提是 src 路径有效、alt 不为空或明确留空。
图片不显示？先查这三处硬伤
90% 的“表格里没图”问题都出在基础环节：
-
src值是空字符串、null或拼错路径（比如后端返回"avatar.jpg"，前端却直接当完整路径用，结果请求/avatar.jpg而非/uploads/avatar.jpg） - 漏写
alt属性，或写成alt="图片"这类无效内容——虽不影响渲染，但加载失败时无提示，排查困难 -
<img>被误放在<td>外面（例如写在<tr>里但没包进单元格），浏览器会忽略或错位渲染
控制台若报 Failed to load resource: the server responded with a status of 404 ()，优先检查 Network 面板里实际发起的请求 URL 是否合理。
控制尺寸别只靠 width/height 属性
在 <img> 上硬写 width="80" height="80" 看似简单，但会导致：
立即学习“前端免费学习笔记（深入）”；
- 强制拉伸变形（原图比例 ≠ 1:1 时）
- 响应式失效（缩放窗口时图片卡死在固定像素）
- 无法统一管理样式（每个
<img>都得重复写）
更稳妥的做法是加 class 后用 CSS 控制：
<td class="avatar-cell"><img src="u1.jpg" alt="用户头像"></td>
对应 CSS：
.avatar-cell img {
max-width: 64px;
height: auto;
vertical-align: middle;
}
max-width 防溢出单元格，height: auto 保比例，vertical-align: middle 消除默认基线对齐导致的底部空白。
动态生成表格时，src 拼接和错误降级必须手动处理
JS 拼 innerHTML 或用 insertAdjacentHTML 插入带图的行时，常见坑：
- 后端返回文件名，前端忘了补前缀：
src="${item.avatar}"→ 应为src="/uploads/${item.avatar}" - 服务端可能返回空值，
src=""会触发根目录 GET 请求，污染日志且浪费请求 - 图片加载慢，表格先渲染空白，用户体验断层
推荐写法（兼顾健壮与简洁）：
<img src="${item.avatar || 'placeholder.svg'}"
onerror="this.src='placeholder.svg'"
alt="${item.name || '暂无头像'}">
onerror 是唯一能在原生 HTML 中做加载失败 fallback 的方式；placeholder.svg 体积小、可内联、抗缩放，比 PNG/JPG 更适合兜底。
真正容易被忽略的点：表格中图片不是孤立元素，它和文字共存于同一行内盒（inline box）。一旦用 display: block 强制转换，就会丢失对齐能力，导致文字换行或错位。所有样式调整，都该基于 vertical-align 和 line-height 协同作用，而不是粗暴清空行内流。
