直接在<td>或<th>中写<img>标签即可显示图片；需确保src路径正确（注意相对路径起点、协议、大小写）、必设alt属性（描述性内容或空字符串），并用CSS而非width/height属性控制尺寸。
直接把 <img> 标签写进 <td> 或 <th> 里就能显示图片，不需要 JS、不用额外容器、也不用改表格结构。
图片不显示？先查 src 路径和控制台报错
绝大多数“图片空白”问题都出在 src 上。浏览器控制台如果出现 Failed to load resource 或 404 Not Found，说明路径根本没指向有效文件。
- 相对路径以 HTML 文件所在目录为起点：比如 HTML 在
/pages/list.html，图片在/assets/avatar.png，就得写src="../assets/avatar.png" - 别漏协议：网络图必须带
https://或//（如src="//cdn.example.com/icon.jpg"），src="cdn.example.com/icon.jpg"是无效的 - 大小写敏感：Linux 服务器上
Photo.JPG和photo.jpg是两个文件 - 本地双击打开 HTML 时，
file://路径容易被浏览器拦截，开发阶段建议用本地服务器（如 VS Code Live Server）
<img> 必须配 alt 属性
alt 不是可选项，它是语义必需字段——既满足无障碍访问要求，又能在图片加载失败时提供上下文提示。
- 描述性内容优先：比如
alt="张三的工牌照片"，而不是alt="photo1"或留空 - 装饰性图片可设为空字符串：
alt=""，告诉屏幕阅读器忽略它 - 没有
alt的<img>在部分校验工具或合规检查中会直接报错
控制图片尺寸，别用 width/height 属性硬设
在 <img> 上写 width="80" 看似简单，但会导致拉伸失真、响应式失效、样式难以复用。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 CSS 控制：给
<td>加 class，再约束内部<img>的尺寸 - 例如：
<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消除底部默认空白 - 避免
display: block，否则图片变成块级元素，和旁边文字混排时会断行
真正麻烦的不是怎么放进去，而是路径是否稳定、alt 是否准确、尺寸是否随表格缩放而自适应——这三点漏掉任一，后续维护成本会指数上升。
