Question

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

我在项目上使用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，因为它已经被解析了，但我不知道如何解析它。 / p>

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

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

Answer 1

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

首先，我只想将动画数据设置为导出对象而不是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: {
      },
    };
  },

记录在案here。

这会使您的初始捆绑更大，但您不必再为服务器拨打动画数据。

除此之外，您需要将animation.json移动到服务器所服务的路径，并将path设置为相对于当前加载的网页的网址。

意外的令牌＆lt;在JSON的位置0 vuejs

1 个答案: