vue 项目中使用svga后缀格式
1 安装依赖
npm install svgaplayerweb --save
2,文件svga.vue
<template>
<div class="x">
<div id="svga" class="svgaBox"></div>
</div>
</template>
<script>
import SVGA from "svgaplayerweb";
export default {
data() {
return {};
},
created() {},
mounted() {
var player = new SVGA.Player("#svga");
var parser = new SVGA.Parser("#svga");
//注意,这里必须是服务器地址,否则报错
parser.load("/01.svga", function(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
});
}
};
</script>
<style>
.svgaBox{
width: 200px;
height: 200px;
margin: 100px auto;
}
</style>
3,控制台报错incorrect header check解决办法
是因为这里的地址不能使用本地文件
//这里的地址不能使用本地文件
parser.load("../svga/01.svga", function(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
});
4,那我们吧.svga的文件发给后端,后端放在服务器上,可以通过后端给的地址,通过服务器地址访问试下。
5,又出现了跨域,因为本地项目地址和服务器的域名地址不一致所以会出现跨越。
6,这里我们在config的index.js下配置
7,注意的是,这里改了,页面引入就要改成 /01.svga 才能匹配到代码地址
这样就好了