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

1

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

Я работаю с 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 файл без его разбора?

  • 2
    Взгляните на вкладку сети вашего браузера devtools. Вы, вероятно, не получите JSON, но вместо HTML.
  • 0
    хорошо, я проверил это, и это не так: /
Показать ещё 9 комментариев
Теги:
vue.js
parsing
lottie

1 ответ

1

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню