求助：Lottie动画无法在浏览器中正常显示的问题

API 探路者

2026-7-1

Lottie动画无法显示的排查与解决方法

检查资源路径正确性
- 确认data.json及配套的SVG图片路径与HTML文件匹配：动画JSON中的图片资源路径是相对JSON文件的位置，若JSON里引用image.svg，则SVG需与JSON在同一目录。
- 打开浏览器开发者工具（F12）的「Network」面板，刷新页面后查看data.json和SVG是否加载成功（无404状态码）。若路径错误，调整path参数，比如动画文件在子文件夹时写path: './animations/data.json'。

确保DOM元素加载完成

若脚本放在<head>中，可能在DOM渲染前执行，导致无法获取canvas元素。解决方式：

将脚本移至</body>标签前；

用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  bodymovin.loadAnimation({
    container: document.getElementById('canvas'),
    renderer: 'canvas',
    loop: true,
    autoplay: true,
    path: 'data.json'
  });
});

验证库版本与动画兼容性
- 你当前使用的Lottie版本为5.7.8，部分高版本AE导出的JSON动画可能与旧版库不兼容，建议更新至最新稳定版本。
- 测试压缩包内的演示HTML：若演示能正常显示，对比自身代码与演示代码的差异，比如容器类型、路径配置、库导入方式。

调整渲染器配置

若动画包含SVG元素，尝试将renderer改为'svg'（canvas渲染对部分SVG动画支持有限），同时可将容器替换为普通div（SVG渲染无需canvas）：

<div id="animation-container" style="width: 300px; height: 300px;"></div>

bodymovin.loadAnimation({
  container: document.getElementById('animation-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});