图片在表格中“掉下来”或底部留空，是因为<img>默认为inline元素、按基线对齐，与文字间留出空白；解决方法是给img设置vertical-align: middle，而非td，并配合max-width: 40px; height: auto保持比例、object-fit: cover实现等比裁剪，同时注意路径拼接、onerror降级及必填alt。
直接把 <img> 塞进 <td> 里就能显示小图，但图片常撑破单元格、上下留白、加载失败变空白——这些问题全出在排版细节上。
为什么图片总在里“掉下来”或底部留空？
默认情况下 <img> 是 inline 元素，基线（baseline）对齐文字，导致下方留出空间；表格单元格又没设垂直对齐方式，视觉上就像“悬空”或“下沉”。
- 用
vertical-align: middle 修正对齐，推荐加在 img 上而非 td，避免影响文字混排
- 别写
display: block —— 会丢失行内特性，后续加文字说明时错位
- 如果单元格里还有文字，比如“张三
<img src="avatar.jpg">”，确保 img 和文字共用同一 line-height 和 vertical-align
怎么让图片固定为 40×40 像素且不失真？
硬写 width="40" height="40" 最容易，但原始比例不对时会拉伸变形；用 CSS 更可控，也方便批量统一。
- 优先用
max-width: 40px; height: auto，保持宽高比，防止溢出
- 若必须等比裁剪（如头像），改用
object-fit: cover + 固定容器尺寸：.avatar-cell { width: 40px; height: 40px; } .avatar-cell img { width: 100%; height: 100%; object-fit: cover; }
- 避免只设
width 不设 height，否则不同图片高度不一，整列错位
动态生成表格时图片不显示，常见路径错误有哪些？
后端返回的是文件名（如 "user_789.jpg"），前端拼接路径时漏了前缀，结果请求变成 /user_789.jpg 而不是 /static/images/user_789.jpg。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器 Network 面板里实际发起的请求 URL，确认是否 404 或 403
- JS 拼字符串时别漏斜杠：
src="/images/" + data.avatar ✅，src="/images" + data.avatar ❌（变成 /imagesuser_789.jpg）
- 服务端返回
null 或空字符串当 src，浏览器会请求当前页面路径（如 GET /），触发无效 404 —— 应提前过滤：src={data.avatar ? `/images/${data.avatar}` : 'placeholder.svg'}
如何处理图片加载失败？
用户网络差、图片被删、路径过期都会导致 <img> 显示为破损图标，单元格看起来是空的，但其实标签还在。
- 用
onerror fallback 最轻量：<img src="x.jpg" onerror="this.src='placeholder.svg'" alt="暂无图片">
- 避免写成
this.onerror=null;this.src=...，否则二次加载失败无法重试
-
alt 必须写有意义的内容，不能空着 —— 屏幕阅读器靠它读，SEO 也依赖它；装饰性图片才可写 alt=""
- 如果用现代方案，可配合
loading="lazy" 减少首屏压力，但注意表格内滚动区域 lazy 加载可能失效
真正卡住人的不是语法，而是路径拼错、vertical-align 忘设、alt 留空、以及把 max-width 写成 width 导致响应式断裂。这些点不盯紧，表格里再多小图也显得毛糙。
默认情况下 <img> 是 inline 元素，基线（baseline）对齐文字，导致下方留出空间；表格单元格又没设垂直对齐方式，视觉上就像“悬空”或“下沉”。
- 用
vertical-align: middle修正对齐，推荐加在img上而非td，避免影响文字混排 - 别写
display: block—— 会丢失行内特性，后续加文字说明时错位 - 如果单元格里还有文字，比如“张三
<img src="avatar.jpg">”，确保img和文字共用同一line-height和vertical-align
怎么让图片固定为 40×40 像素且不失真？
硬写 width="40" height="40" 最容易，但原始比例不对时会拉伸变形；用 CSS 更可控，也方便批量统一。
- 优先用
max-width: 40px; height: auto，保持宽高比，防止溢出 - 若必须等比裁剪（如头像），改用
object-fit: cover+ 固定容器尺寸：.avatar-cell { width: 40px; height: 40px; } .avatar-cell img { width: 100%; height: 100%; object-fit: cover; } - 避免只设
width不设height，否则不同图片高度不一，整列错位
动态生成表格时图片不显示，常见路径错误有哪些？
后端返回的是文件名（如 "user_789.jpg"），前端拼接路径时漏了前缀，结果请求变成 /user_789.jpg 而不是 /static/images/user_789.jpg。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器 Network 面板里实际发起的请求 URL，确认是否 404 或 403
- JS 拼字符串时别漏斜杠：
src="/images/" + data.avatar✅，src="/images" + data.avatar❌（变成/imagesuser_789.jpg） - 服务端返回
null或空字符串当src，浏览器会请求当前页面路径（如GET /），触发无效 404 —— 应提前过滤：src={data.avatar ? `/images/${data.avatar}` : 'placeholder.svg'}
如何处理图片加载失败？
用户网络差、图片被删、路径过期都会导致 <img> 显示为破损图标，单元格看起来是空的，但其实标签还在。
- 用
onerrorfallback 最轻量：<img src="x.jpg" onerror="this.src='placeholder.svg'" alt="暂无图片"> - 避免写成
this.onerror=null;this.src=...，否则二次加载失败无法重试 -
alt必须写有意义的内容，不能空着 —— 屏幕阅读器靠它读，SEO 也依赖它；装饰性图片才可写alt="" - 如果用现代方案，可配合
loading="lazy"减少首屏压力，但注意表格内滚动区域 lazy 加载可能失效
真正卡住人的不是语法，而是路径拼错、vertical-align 忘设、alt 留空、以及把 max-width 写成 width 导致响应式断裂。这些点不盯紧，表格里再多小图也显得毛糙。
