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个问题。

1. 如何批量引入 images 文件夹下的图片？
2. 如何解决相对路径的问题？

排查

把引入的 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
  }
})

参考

1. npmjs - vue3-lottie
2. Github - 怎么处理需要图片资源的动画