缩略图需合法src和非空alt，用css控制尺寸避免变形，用包裹实现安全点击预览，启用loading="lazy"优化性能。
直接把 <img> 塞进 <td> 或 <code><th> 里就行，但缩略图要能看、能点、不崩、不卡，得过几道关。
<h3>缩略图必须有合法 src 和非空 alt</h3>
<p>缺一不可。src 错了图片不显示，alt 空了不仅影响可访问性，还会被 Lighthouse 报“图像缺少替代文本”。</p>
<ul>
<li>
<code>src 必须是真实可访问路径（相对或绝对），不能是占位符如 "#" 或空字符串 ""
alt 要描述内容：如果是用户头像，写 alt="张三的头像"；如果是纯装饰图标（比如状态小圆点），才写 alt=""
title 代替 alt——它只是悬停提示，对屏幕阅读器无效控制尺寸别硬写 width/height 属性
直接写 width="50" height="50" 容易拉伸变形，尤其当原始图比例不一致时。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐用 CSS 控制：
style="width: 50px; height: auto;"或更稳妥的style="max-width: 50px; height: auto;" - 若需裁剪居中显示（比如头像），加
style="object-fit: cover; border-radius: 50%;" - 避免同时设宽高值，除非你确定所有图源比例完全一致
点击缩略图预览大图的最小可行写法
别让 <img> 自己带 href——那会整页跳转，体验差；也别给 <td> 加 <code>onclick——键盘用户无法 Tab 进入，右键菜单没“复制链接地址”。
- 正确姿势：把
@#@#@#@#@#@#@#@#@#@0
大量缩略图时性能容易被忽略
几十个 <img> 一起加载，页面会卡顿、白屏久，尤其移动端。
- 务必启用懒加载：
<img src="thumb.jpg" alt="项目截图" style="max-width:90%">（现代浏览器原生支持） - 缩略图尺寸别超必要：比如单元格只显示 60×60，就别传 300×300 的图再靠 CSS 压缩
- 路径尽量走 CDN，静态资源加缓存头（
Cache-Control: public, max-age=31536000） - 如果表格支持分页，确保未渲染页的缩略图 DOM 不提前创建
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
