在vue项目中使用lottie动画及遇到图片显示不出来问题

首先npm安装vue-lottie:

npm install vue-lottie -S

在需要使用的组件里引用lottie动画的json文件：

import * as animationData from '@/assets/json/loading.json'
import Lottie from 'vue-lottie/src/lottie.vue'

注册到组件里：

data(){
  return {
    defaultOptions:{
      animationData:animationData.default
    }
  }
},
components:{
  Lottie
},
methods:{
  handleAnimation(anim){
	this.anim = anim
  }
}

在template里使用Lottie组件：

<template>
  <Lottie :options="defaultOptions" :height="26" :width="26" @animCreated="handleAnimation"/>
</template>

好了现在说一下遇到的问题，图片下载不出来，网上也没有相关问题的解决方法，只能自己摸索了

解决思路，首先看到图片没显示出来，应该是路径问题，然后用谷歌查看路径，如图：

发现这路径是不存在的，解决方法有俩种，
第一种方法
图片上传到网络改成网络连接图片：
图片路径，这里我改成了网络图片，删掉了 ‘u’的参数

第二种方法
把json路径改成img，打包之后就能看见

总结：我用的是第一种方法，有更好的方法可以留言哦，互相学习