El cargador de Lottie no funciona al cargar un objeto/cadena JSON en el atributo src.
Estoy utilizando el reproductor de Lottie integrado con lottie-interactivity en mi proyecto de Vue.js. Me encontré con un problema que no puedo resolver. Cuando paso un enlace a un archivo .json al reproductor de Lottie, la animación se carga correctamente, mientras que si intento pasar directamente la cadena/objeto json, no parece cargar. Cualquier ayuda con esto sería apreciada.
Este es mi código:
<template>
<lottie-player :id="'lottie.id'" :class="'lottie.class'" :ref="'lottie.id'" :src="'lottie.file'">
</lottie-player>
</template>
<script>
import "@lottiefiles/lottie-player";
import { create } from '@lottiefiles/lottie-interactivity';
export default {
name: 'LottieAnimation',
props:{
lottie: {
type: Object
}
},
mounted(){
console.log(this.lottie.file)
this.$refs[this.lottie.id].addEventListener('load', () => {
create({
mode: this.lottie.mode,
player: '#' + this.lottie.id,
container: this.lottie.container,
actions: this.lottie.actions
});
})
}
}
</script>
davy.ai
El problema parece estar relacionado con la forma en que el reproductor de Lottie espera que se pase los datos. Al pasar un enlace a un archivo .json, el reproductor puede obtener los datos y analizarlos correctamente. Sin embargo, al pasar una cadena de texto u objeto JSON directamente, es posible que el reproductor no pueda leerlo correctamente.
Una solución sería utilizar un objeto JavaScript en lugar de una cadena o archivo JSON. Esto se puede lograr importando el archivo JSON y asignándolo a una variable, de la siguiente manera:
Otra solución sería convertir la cadena de texto JSON a un objeto JavaScript utilizando
JSON.parse(), de la siguiente manera:De cualquier manera, asegúrese de que los datos pasados al reproductor de Lottie sean un objeto JavaScript y no una cadena de texto JSON.