vue 项目中使用svga格式动画图标效果 incorrect header check解决办法

1. 什么是SVGA

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。
动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 SVGAPlayer 之后直接使用。

2. 效果图

3. 安装依赖

npm install svgaplayerweb --save

4. svga.vue

<template><div class="container"><div id="demoCanvas" class="svga" ref="canvas"></div></div>
</template>
<script>
import SVGA from "svgaplayerweb";export default {data() {return {};},created() {},mounted() {var player = new SVGA.Player("#demoCanvas");var parser = new SVGA.Parser("#demoCanvas");parser.load("/svga/01.svga", function(videoItem) {player.setVideoItem(videoItem);player.startAnimation();});}
};
</script>
<style>
.svga {width: 200px;height: 200px;margin: 100px auto;
}
</style>

5. incorrect header check解决办法

之前有同学问我这个，确实开发中也遇到了，这里补充下怎么解决的。

因为是之前这里写的是直接引入本地文件，默认是访问不到会出现 incorrect header check 报错问题

之前我做的时候也遇到了这个问题，是跟后端沟通，把文件放在服务器上，然后本地去做访问。

那我们可以通过后端给的地址，通过服务器地址访问试下。

好家伙，又出现了跨域，因为本地项目地址和服务器的域名地址不一致所以会出现跨越。

那我们可以在通过 vue.config.js 里面做代理处理（因为我是把文件直接放在 svga 文件夹下的，所以可以通过 /svga 去匹配到这个地址）

注意的是，这里改了，页面引入就要改成 /svga/01.svga 才能匹配到代码地址

parser.load("/svga/01.svga", function(videoItem) {player.setVideoItem(videoItem);player.startAnimation();
});

不用担心发布后能不能访问，发布打包后项目会处于同一域名，不会出现跨越问题。

vue 项目中使用svga格式动画图标效果 incorrect header check解决办法相关推荐

在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
uniapp 在 H5、App、微信小程序中使用 svga 格式动画详细示例教程，附插件源码及示例源码（常见于网页直播刷礼物特效功能）
前言兼容 h5 网页,微信小程序和 App. 本文详细讲解在 uni-app项目中,如何实现 svga 格式动画的引入及展示. 组件源码及使用文档都有! 你直接复制本文的源码,即可得到封装好的 s ...
vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
vue项目中，amr格式的音频播放
在vue项目中,使用电脑浏览器播放amr格式的音频文件是直接播放不出来的,需要使用一个js包:benz-amr-recorder 1.npm install benz-amr-recorder 2.想 ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
阿里巴巴矢量图标库项目中使用svg格式字体图标使用方式及封装
一.首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中二.阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式) 进入项目以后会看到阿里云可以选择三种方式进行导 ...
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...