时间戳

首页 > 解决方案 > Lottie Animation 不使用 ejs 加载，而是使用标准 html 加载

javascript - Lottie Animation 不使用 ejs 加载，而是使用标准 html 加载

问题描述

我正在使用以下代码在项目中嵌入一个 lottie 文件，它被添加到 DOM 但我看不到它。我正在使用ejs，但是当我切换到标准html时，我可以看到lottie动画。

<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecMeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>

当我在 ejs 上运行此代码时，这就是我得到的，请提出解决方案，谢谢！ 在此处输入图像描述

我的ejs代码：

<%- include('header'); -%>
<div class="info-header">
  <h1>dCrypt</h1>
  <p class="info">
    dCrypt 2020 promises to be a cryptic hunt in a league of its own. We have
    developed a new platform that combines the classic Capture the Flag formula
    with a fun, engaging and strategic wargame that will test both the
    participants ability to solve these questions, while also using resources in
    a tactical manner.
  </p>
  <button class="mainbtns">Format</button>
  <button class="mainbtns" style="margin-left: 5%">Discord</button>
</div>
<script
  src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
></script>
<lottie-player
  src="https://assets2.lottiefiles.com/private_files/lf30_kecMeI.json"
  background="transparent"
  speed="0.2"
  style="width: 500px; height: 500px"
  loop
  autoplay
></lottie-player>
<%- include('footer'); -%>

我如何渲染上面的 ejs 代码：

app.get("/", contentSecurity, (req, res) => {
  res.render("index.ejs", { active: "home" });
});

页脚和页眉只有文本和 css

网络选项卡： 网络选项卡

标签： javascripthtmlcssejslottie

解决方案

所以这与 ejs 无关 - 不同之处在于您的服务器正在向页面的 HTTP get 请求添加标头。

打开站点，我在控制台上收到以下错误：

内容安全策略：页面设置阻止在 eval（“script-src”）加载资源。

这是因为您的页面附带了一个标题：

内容安全策略：script-src 'self' https://* 'unsafe-inline'

您可以在MDN 页面的标题和script-src上找到更多详细信息。

引发错误的行使用 eval 来创建一个函数，以使您必须添加'unsafe-eval'到标题中。

推荐阅读