vuecli使用lottie时,lottie中图片路径问题

lottie导出的是一个json文件,形如:

{
    "v": "5.9.1",
    "fr": 30,
    "ip": 1,
    "op": 301,
    "w": 1920,
    "h": 560,
    "nm": "xxx",
    "ddd": 0,
    "assets": [
        {
            "id": "image_0",
            "w": 370,
            "h": 520,
            "u": "images/",
            "p": "img_0.png",
            "e": 0
        },
        {
            "id": "image_1",
            "w": 3840,
            "h": 1120,
            "u": "images/",
            "p": "img_1.jpg",
            "e": 0
        },
    ]
}

几种解决方式:

  1. 修改webpack打包配置,图片文件名固定,那么只需要修改json里面的u 和 p 属性即可
  2. 将json文件改为js文件,删除 u 属性,修改p属性,使用require('...图片路径')引入图片
  3. 将动画文件放到public目录下面,使用assetPath属性修改图片引用目录