lottie-web
lottie-web copied to clipboard
Animation path does not work
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>
they are not gonna answer xDDD