Неожиданный токен <в JSON в позиции 0 vuejs - PullRequest
Новая
       12

Неожиданный токен <в JSON в позиции 0 vuejs

0 голосов
/ 07 мая 2018

Я искал, как решить эту ошибку, но я не очень хорошо понимал, как ее исправить.

Я работаю с 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, не разбирая его?

1 Ответ

0 голосов
/ 07 мая 2018

Вряд ли ваш сервер обслуживает /src/data/animation.json. Вместо использования path используйте animationData и просто установите объект анимации напрямую (вместо вызова через сервер).

Во-первых, я бы просто установил данные анимации на обычный модуль ES6, который экспортирует объект вместо json.

/ SRC / данные / 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-адреса относительно страницы, которая загружена в данный момент.

...