airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.65k stars 2.88k forks source link

Animation path does not work #3084

Open KindSpidey opened 7 months ago

KindSpidey commented 7 months ago

Hey, guys! I am using lottie-web library in my Vue 3 project.

When I use my .json animation as already imported in file, this way, everything works:

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import lottie from 'lottie-web';
import diamond from '../assets/diamond.json'

onMounted(async () => {
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
   animationData: diamond
  });
});
</script>

But when I'm trying to do absolutely same thing, but using path instead of animationData, I'm getting error

lottie-web.js?v=81bb1d13:981 Uncaught DOMException: 
Failed to read the 'responseText' property from 'XMLHttpRequest': 
The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').
    at formatResponse (http://localhost:5173/node_modules/.vite/deps/lottie-web.js?v=81bb1d13:981:29)
    at xhr.onreadystatechange (http://localhost:5173/node_modules/.vite/deps/lottie-web.js?v=81bb1d13:996:38)

Why?

The code:

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import lottie from 'lottie-web';

onMounted(async () => {
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '../assets/Animation - 1714120260751.json'
  });
});
</script>
dnylnd commented 7 months ago

they are not gonna answer xDDD

zobweyt commented 2 months ago

It may be because the path to the animation is incorrectly specified.

I had a problem that I specified a relative path instead of an absolute one. For example, assets/animation.json instead of /assets/animation.json. Missing leading slash (/)