最直接兼容的方式是使用 标签插入 gif 动图，因其无需 js、兼容性强；而 embed 和 object 存在过滤、不支持移动端等问题。
<img> 标签是 HTML 编辑器里插入 GIF 动图最直接、兼容性最好的方式，不需要 JS、不依赖编辑器高级功能，只要支持基础 HTML 渲染就能动。
为什么不用 embed 或 object？
有些老教程推荐用 embed 插入 GIF（尤其在报表类编辑器如 FineReport 中），但它有明显限制：
-
embed在多数现代富文本编辑器（如 TinyMCE、CKEditor、Quill）中会被自动过滤或转义，导致不渲染 - 移动端基本不支持
embed加载 GIF，预览时可能空白 -
object更复杂，需指定type="image/gif"，但浏览器实际仍按<img>方式解码，多此一举 - 只有极少数封闭系统（如旧版 FR 报表）强制要求
embed，且明确标注“不支持移动端”
<img> 的写法和关键属性
在 HTML 编辑器的源码模式（或“HTML 视图”）中粘贴以下结构即可：
@@##@@
注意这几点：
-
src必须是相对路径（如"./assets/spinner.gif"）或绝对 URL；编辑器若不支持本地文件拖入，需先上传 GIF 到服务器/CDN 再复制链接 - 务必显式设置
width和height—— 防止页面重排、避免模糊（CSS 缩放会拉伸像素，且不减文件体积） -
alt不可省略，否则无障碍阅读器无法识别，部分编辑器也会警告 - 不要加
loading="lazy"：GIF 动画首次进入视口才加载，会导致“卡顿启动”，破坏加载反馈意图
编辑器里常见失效原因和修复
GIF 插入后不动，通常不是格式问题，而是环境限制：
- 编辑器启用了“HTML 过滤”或“安全模式”，自动移除了
img标签或清空了src—— 检查源码是否变成<img src="loading.gif" alt="加载中" style="max-width:90%" style="max-width:90%">，需关闭过滤或白名单img[src] - 路径错误：编辑器预览时工作目录 ≠ 你认为的根目录，建议用浏览器开发者工具看 Network 标签页，确认 GIF 返回 404
- CSS 强制覆盖：比如全局设置了
img { animation: none !important; }，GIF 会静止；检查 computed styles 中是否有animation相关值 - 某些编辑器（如 Notion、语雀）仅支持“嵌入媒体链接”，不解析 HTML，此时必须用平台提供的 GIF 插入按钮，而非手写
<img src="">
想控制播放？别硬改 <img>
原生 <img> 没有 play()/pause() 方法。所谓“暂停 GIF”本质是：
- 替换
src为静态首帧图（需提前导出） - 用
<canvas></canvas>+ GIF 解析库（如gifuct-js）逐帧绘制，但 CPU 开销大，低端机易掉帧 - 改用
<video></video>：对 >1 秒、>300×300 的动效，<video muted loop playsinline></video>体积更小、控制更准、功耗更低
真正需要播放控制的场景，优先考虑视频替代方案，而不是在 GIF 上打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
