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