如何将 Lottie 动画放置在主页上？

支持
1

你好！

我设计了一个动态版本的标志，快来看看 这里 吧！

我已经将其转换为 .json 格式（作为 Lottie 文件动画），并希望将这段动画放在我的页面头部。
理论上，只需将以下代码粘贴到页面中即可实现：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_KrQ5B2.json"  background="transparent"  speed="1"  style="width: 600px;" autoplay >
</lottie-player>

但当我在 Discourse 项目中尝试时，却无法正常工作。
我不明白原因，因为它调用的是外部资源，按理说应该独立于 Discourse 的环境才对？

我在其他帖子中看到，Discourse 用户无法使用 Lottie 动画替代分类图标。
但在我的情况下，我不明白为什么无法生效（如果我将代码粘贴到 body 标签中，按理说是可以工作的）。

有人能帮我解决这个问题吗？:slight_smile:

2

我不确定如何为你的 Logo 使用该动画，但要让脚本在你的 Discourse 站点上运行，你需要将 https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js 添加到站点的“内容安全策略脚本源”设置中。当我这样做，并将该脚本添加到我的主题的头部区域时，动画就能正常显示了。

3

运行正常！
感谢您的回答 :slight_smile: