lottie-web 踩坑

官网的demo是这样的

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
})

我实际使用的代码是

lottie.loadAnimation({
        container: this.$refs.animationHeart, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: path.join(__dirname, './4265-favoriete-producten.json') // the path to the animation json
      })

报错：

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 (webpack-internal:///./node_modules/_lottie-web@5.4.4@lottie-web/build/player/lottie.js:4325:17)
at XMLHttpRequest.xhr.onreadystatechange (webpack-internal:///./node_modules/_lottie-web@5.4.4@lottie-web/build/player/lottie.js:4340:26)

查了一下在Vue使用的方法
https://github.com/bienvenidoY/blog/issues/4

注意下 lottie-web在vue运行下是有问题的，很多方法都无效。

正确使用

cnpm i vue-lottie --save

https://juejin.im/post/5b180a706fb9a01e780a49d4

小坑记录

lottie组件中,width和height在不设定的情况下，是根据父元素size来调整的，width将会是父元素的width。
但是组件的width不会超出父元素的width，即使你设置的width大于父元素的width。