3

我一直在寻找如何解决这个错误，但我不太了解如何修复它。

我在一个项目上使用 lottie-web，我必须在一个对象上设置动画的参数，以便稍后将其作为参数传递。

我的组件：

import Lottie from './../../node_modules/lottie-web/build/player/lottie';

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      path: '/src/data/animation.json',
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

但是当这行被执行时：

    Lottie.loadAnimation(this.animationParams);

我收到此错误：

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onreadystatechange

我在 Stackoverflow 的其他答案中看到的是，我不必解析 json，因为它已经解析了，但我不知道如何不解析它。

这是 json 文件中的内容：http: //myjson.com/s0kn6。

我如何在不解析的情况下加载该 json 文件？

4

1 回答 1

1

您的服务器不太可能在提供/src/data/animation.json. 而不是使用pathuseanimationData而只是直接设置动画对象（而不是通过服务器调用）。

首先，我只需将动画数据设置为导出对象而不是 json 的常规 ES6 模块。

/src/data/animation.js

export default {
  // your animation data
}

请注意，它是 javascript 文件，而不是 json 文件。然后在您的组件中，只需导入该对象。

import Lottie from './../../node_modules/lottie-web/build/player/lottie';
import animationData from "/src/data/animation"

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      animationData,
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

这在此处记录。

这将使您的初始捆绑包更大，但您不必为动画数据额外调用服务器。

除此之外，您将需要移动animation.json到服务器提供的某个路径，并设置path为相对于当前加载的页面的 url。

于 2018-05-07T16:43:27.513 回答