Vue3里如何使用本地lottie动画以及如何更优雅的批量引入图片
介绍了 Lottie 动画及其在 Vue 3 项目中的使用方法，重点解决了批量引入图片和相对路径问题，确保动画正常显示。
如果着急直接跳到「解决」章节。
前言
什么是 Lottie 动画？
Lottie 动画是一种轻量级的动画文件格式，它使用 JSON 描述动画数据，可以通过Lottie库在网页和移动应用中快速加载和渲染高质量的动画。它支持 AE 动画导出，并能够实现复杂的动效，同时保持小文件体积和高性能。
----chatGPT
简单来说，Lottie 动画是一种用 JSON 格式描述的动画。由于其小体积和高性能，常用于实现复杂动画，UI 设计师可以将其导出给前端，前端导入后即可使用。
如何使用 lottie 动画
只需三步。
1、安装 vue3-lottie
npm install vue3-lottie@latest --save
2、注册组件
// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'createApp(App).use(Vue3Lottie).mount('#app')
3、在 template 中使用
<template><h1>Vue3 lottie test</h1><Vue3Lottie :animationData="TestLottieJSONData" :height="200" :width="200" />
<div><script setup>
import TestLottieJSONData from './assets/lottie/data.json' // 引入 JSON 文件
</script>
但是在我的使用场景中出现了问题。
问题
UI 导出的动画带有图片，但无论是 JSON 文件命名，还是图片命名都是一样的，而且 JSON 文件里使用的图片都是相对路径。例如，有两个动画，它们的文件结构如下所示：
.
├── data.json
└── images├── img_0.png└── img_1.png
这就带来了2个问题。
- 如何批量引入
images文件夹下的图片？ - 如何解决相对路径的问题？
排查
把引入的 JSON 文件打印出来，可以看到静态文件（即图片）都存在于 TestLottieJSONData.assets 这个对象数组下，打印其中一项如下：
{"id": "image_0","w": 107,"h": 140,"u": "images/","p": "img_0.png","e": 0
}
可以看到，u 项是文件夹，p 项是文件名，也就是说只要遍历这个数组，修改这两个项就好。
解决
问题一：如何批量引入 images 文件夹下的图片？
使用 import.meta.glob 批量引入：
const testLottieImages = import.meta.glob('./assets/lottie/images/*.png', {eager: true})
问题二：如何解决相对路径的问题？
遍历静态资源数组，修改路径：
TestLottieJSONData.assets.forEach((item, index) => {const imagePath = `./assets/lottie/images/${item.p}`item.u = ''if (testLottieImages[imagePath]) {item.p = testLottieImages[imagePath].default}
})
参考
- npmjs - vue3-lottie
- Github - 怎么处理需要图片资源的动画