你没法在里用切换图片——只在或/内部有效，它不会作用于的src属性，更不被或解析。
HTML表格里不能用 <source></source> 标签加载不同尺寸的图片
直接回答：你没法在 <table> 里用 <code><source></source> 切换图片——<source></source> 只在 <picture></picture> 或 <audio></audio>/<video></video> 内部有效，它不会作用于 <img> 的 src 属性，更不被 <td> 或 <code><tr> 解析。常见错误是把 <code><source></source> 塞进 <td> 里，结果图片不显示、控制台报错或完全忽略响应式逻辑。
<h3>正确做法：用 <code><picture></picture> 包裹 <img> 放进表格单元格
想让表格里的图片随屏幕宽度变化，必须把响应式图片逻辑封装在 <picture></picture> 中，再把这个整体放进 <td>。浏览器会根据 <code>media 查询和 srcset 自动选最合适的源。
-
<picture></picture>必须包含至少一个<source></source>和一个兜底的<img>（否则不渲染） -
<source></source>的media是 CSS 媒体查询语法，比如(max-width: 768px) -
<img>的src是默认图（小屏 fallback），srcset不起作用，仅靠<source></source>控制 - 所有
<source></source>必须写在<img>之前，顺序错会导致失效
|
|
表格内响应式图片的兼容性和性能注意点
不是所有场景都适合塞 <picture></picture> 进表格——尤其当表格列多、行数大时，容易拖慢渲染，且部分旧浏览器（IE、老版 Safari）不支持 <picture></picture>。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- IE 完全不支持
<picture></picture>，需用<img src="fallback.jpg" alt="描述">+sizes降级（但只支持分辨率切换，不支持媒体查询） - 如果表格用于数据展示而非视觉优先，建议改用 CSS 背景图 +
@media控制，避免 HTML 结构膨胀 -
<source></source>的srcset值不能带空格或非法字符；路径要相对/绝对一致，否则 404 且无提示 - 表格单元格默认不设宽高，
<picture></picture>内图片可能撑开列宽，建议给<td> 加 <code>width或max-width替代方案：CSS 控制背景图响应式（适用于简单图标或装饰图）
如果图片只是辅助信息（如状态图标、分隔符），用 CSS 更轻量，也绕过 HTML 语义限制。
- 把图片设为
<td> 的背景图，用 <code>background-image+@media切换 - 必须设
background-size: contain或cover，否则缩放失真 - 需要保留可访问性时，仍得加
<span class="sr-only">已发货</span>等辅助文本
<td class="status-icon"></td>
.status-icon { width: 24px; height: 24px; } @media (max-width: 480px) { .status-icon { background-image: url("icon-sm.png"); } } @media (min-width: 481px) { .status-icon { background-image: url("icon-lg.png"); } }表格里塞响应式图，核心就一条：别硬套<source></source>到表格标签里，先确认它是内容图还是装饰图，再选<picture></picture>或 CSS 方案——后者更容易调试，前者语义更强但容错更低。 - 把图片设为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
