lottie-web的图片要放在哪里才能被json读取到？

Question

背景 使用lottie动画的时候json文件读取不到图片的地址
而且查阅了很多资料都没有找到解决方案
assetsPath写绝对路径没什么效果 但是需要使用本地的资源
images文件夹放在根目录没什么用 默认读取是从根目录直接读图片 但是不可能直接把图片全都扔在根目录 把图片资源文件夹放在根目录不管是起名assets还是images都没有办法读取到
看到有一个是setImageAssetsFolder属性可以设置资源目录 但是发现是android的方法 请问在web端怎么才能设置制定图片资源目录啊

官方文档只有这么几个属性，也没有关于资源目录设置的 求大神指点orz

Answer 1

import animation from 'xxx.json'
// use
{
    xxx: animation.default
}

Answer 2

你可以看看这篇文章，里面有提到图片资源，看看是否对你有帮助：
https://segmentfault.com/a/1190000018577416

文章里面写到：若想统一修改静态资源路径或者设置成绝对路径，可在调用loadAnimation时传入assetsPath参数：

lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  path: 'data.json',
  assetsPath: 'URL'  // 静态资源绝对路径
});

Answer 3

请问一下你的问题解决了吗，我今天也遇到这个问题了。

Answer 4

我也遇到了这个问题，查看了一下lottie-web的源码，如下：

AnimationItem.prototype.getAssetsPath = function (assetData) {
    var path = '';
    if(assetData.e) {
        path = assetData.p;
    } else if(this.assetsPath){
        var imagePath = assetData.p;
        if(imagePath.indexOf('images/') !== -1){
            imagePath = imagePath.split('/')[1];
        }
        path = this.assetsPath + imagePath;
    } else {
        path = this.path;
        path += assetData.u ? assetData.u : '';
        path += assetData.p;
    }
    return path;
};

你检查下你的json文件里，关于图片的配置assets数组里的item的e是否有值。

这个是我的配置，设计师导出的原始值是1，按照上面贴的代码，path值直接被赋值为p，改为0则运行正常。如果u就是你的图片文件夹名，则不需要在使用时配置assetsPath(个人感觉这个配置可能是用来配置CDN的)