求助：网页中Lottie图标无法正常显示的问题排查

问题描述 #

持有一个Lottie图标，但无法正常显示。已在HTML的head标签中引入lottie-player脚本，在body中配置了图标相关样式，尝试调整链接位置仍未解决。

问题代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=“https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script>
</head>
<body>
        <lottie-player src=“https://lottie.host/b35cc63e-e72a-4978-add6-d71a6cbcfdab/SQ1XbCeUpR.json” background=“#ffffff” speed=“1” style=“width: 300px; height: 300px” loop controls autoplay direction=“1” mode=“normal”></lottie-player>
    </div>
</body>
<script src="myscript.js"></script>
</html>

修复步骤 #

• 替换中文引号为英文引号：代码中所有的“”是中文全角引号，浏览器无法正确解析属性值，必须替换为英文半角引号""。
• 移除多余的闭合标签：body中的</div>没有对应的<div>起始标签，破坏了HTML结构，需要删除。
• （可选）确认动画源地址：你提供的Lottie图标链接和代码中使用的src地址不一致，若上述修复后仍无法显示，可尝试将src替换为你提供的动画对应的JSON文件地址。

修复后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
    <lottie-player 
        src="https://lottie.host/b35cc63e-e72a-4978-add6-d71a6cbcfdab/SQ1XbCeUpR.json" 
        background="#ffffff" 
        speed="1" 
        style="width: 300px; height: 300px" 
        loop controls autoplay direction="1" 
        mode="normal">
    </lottie-player>
</body>
<script src="myscript.js"></script>
</html>

内容的提问来源于stack exchange，提问作者Msamericana1