Lottie播放器在用作js模块时未加载

Question

我正在尝试使用乐透玩家web组件。我已经按照他们在github上的说明安装了npm:

npm install --save @lottiefiles/lottie-player

将乐透玩家添加到html中，如下所示：

<header>
<div>
<lottie-player 
src="https://assets7.lottiefiles.com/datafiles/gbQKQKT9Z0WGdT9/data.json"  
background="transparent"  speed="0.5"  
style="width: 30px; height: 30px;"  
loop 
controls 
autoplay>
</lottie-player> 
</div>
<h1>SIM</h1>
</header>

在我的main.js文件中，我正在导入彩票玩家：

import "@lottiefiles/lottie-player";

但是，彩票玩家并不是以这种方式加载到html中的。当我用CDN导入脚本时，它就工作了。我如何使它与导入到我的js文件一起工作？

Answer 1

以下示例使用lottie-web而不是lottie-player

import React, { useEffect, createRef } from 'react';
import lottie from 'lottie-web';
const LottieWrapper = () => {
let animationContainer = createRef<HTMLDivElement>();
useEffect(() => {
const anim = lottie.loadAnimation({
container: animationContainer.current,
renderer: 'svg',
loop: true,
autoplay: true,
// animationData: // local json file,
path: 'https://assets2.lottiefiles.com/packages/lf20_6UVhfF.json',
});
return () => anim.destroy(); // optional clean up for unmounting
}, [animationContainer]);
return (
<div className="App">
<div>Bodymovin Animations in React</div>
<div className="animation-container" ref={animationContainer} />
</div>
);
};
export default LottieWrapper;