问题遇到的现象和发生背景
今天尝试在Html里面渲染svga格式文件,不知道为啥,那个图片一直没办法成功引入
问题相关代码,请勿粘贴截图
<div class='w'>
<canvas>canvas>
div>
<style type="text/css">
.w{
width: 400px;
height: 300px;
background: red;
}
canvas { width: 200px; height:300px;}
style>
<script src="https://cdn.jsdelivr.net/npm/svga.lite/svga.lite.min.js">script>
<script>
function playerSvga() {
let svgaArray ='http://localhost:8080/E:/adobe illustrator/wozhizongyili/dragonBoat/dragonBoat.svga'
const canvas = document.getElementsByTagName('canvas')[0]
const downloader = new window.SVGA.Downloader()
const parser = new window.SVGA.Parser()
const player = new window.SVGA.Player(canvas)
player.set({
cacheFrames: true,
intersectionObserverRender: true
})
downloader.get(svgaArray).then(fileData => {
parser.do(fileData).then(svgaData => {
player.mount(svgaData).then(() => {
player.start()
downloader.destroy()
parser.destroy()
})
})
})
}
playerSvga()
script>
body>
运行结果及报错内容
那个svga图片一直无法显示
我的解答思路和尝试过的方法
一开始我以为是图片有问题,但在vscode里打开是我想要的图片。以为是路径问题,就把svga文件放进了个人服务器里引入,发现不行,又放到了本地里,还是不行,不知道是哪里出了问题
我想要达到的结果
svga图片能显示出来
你这个路径就很奇怪,错了吧:
http://localhost:8080/E:/adobe illustrator/wozhizongyili/dragonBoat/dragonBoat.svga,
http://localhost:8080服务器访问路径
E:/adobe illustrator/wozhizongyili/dragonBoat/dragonBoat.svga 磁盘路径
如果明确绝对路径是E:/adobe illustrator/wozhizongyili/dragonBoat/dragonBoat.svga,直接这个也行