使用 lottie.js 包含 json 文件作为路径

Question

在我的 Laravel homestead 项目中，我想使用 airbnb/lottie 来显示动画。我已将我的 lottie.js 和 script.js 放在我的资产文件夹中。我的 script.js 看起来像这样：

var anim = document.getElementById('bodymovin');

var animData = bodymovin.loadAnimation({
    container: anim,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: 'data.json',
});

btn = document.getElementById('animBtn');
btn.addEventListener('click', function() {
    animData.setDirection(1);
    animData.play();
});

现在的问题是找不到data.json，错误：

GET http://bertels.test/nl/vacatures/data.json 404 (Not Found)

我的 data.json 与我的 script.js 在同一目录中。我的问题是：如何在 script.js 中使用 data.json？

此致，

burnerPhone

Answer 1

您可以使用自定义路由 return 所需的文件。将文件复制到 /storage/app/public 并将以下代码附加到 routes/web.php:

Route::get('/files/{filename}', function($filename){
    return \Storage::download($filename); // assuming default disk is set to 'public'
});

然后使用 PROTOCOL://SERVER_HOST/files/data.json

在浏览器中访问该文件

当然，您也可以使用 file_get_contents，但您需要将其包装在响应中并测试文件是否正确 headers 输出。

使用 lottie.js 包含 json 文件作为路径

Include json file as path using lottie.js

json

laravel

homestead

lottie