ecahrts的symbol显示图片显示不出来或者是有方块

码农小王123123

已于 2024-07-31 16:55:53 修改

阅读量1.3k

点赞数 2

文章标签： echarts

于 2023-11-16 10:53:55 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56666791/article/details/134436732

版权

文章讲述了在使用SVG时遇到的问题，即符号图片路径无论是相对路径还是绝对路径（如image:///和image://localhost）都无法正常显示。解决方法是确保路径使用正斜杠(`/`），尝试使用项目路径（如`http://localhost:4444/src/assets/image`），并检查图片本身是否存在格式问题或网站填充影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错背景

nodeName: nodes[j].nodeName,
value: [x, y],
symbolSize: 50,
// alarm: nodes[j].alarm,
symbol: 'image///../../../../../assets/image/guiti.png',  //'image:///asset/get/s/' + nodes[j].img,
itemStyle: {
    normal: {
        color: '#12b5d0',
    }
}

}

我的代码使用了symbol
发现图片使用绝对路径和相对路径都不能正常实现 ，这个前缀是调用image的

修改1

symbol: 'image://../../../../../assets/image/guiti.png',

不行

修改2

“image://http://localhost:4444/src/assets/image/red.png”
发现可以，把路径改成项目路径就行，就是ip加接口，再加上图片就能获取到
查看echarts官网人家给出的图片调用格式为
‘image://http://xxx.xxx.xxx/a/b.png’
说的就是这个方法

注意

总之要注意的就是
第一点
路径不要使用 \ 要使用/ 因为你的鼠标点击复制的不管是相对路径还是绝对路径都是反斜杠应该改成正斜杠/
第二点
相对路径搞不明白就使用绝对路径，绝对路径都不能显示就是图片路径写的方式有问题了。
第三点
因为你指定的图片很有可能会出问题，比如不能正常显示或者是没有保存等等，可以使用你之前用过的图片试一下
第四点
有时候出现方块一个是点开图片文件看一下，有的网站下载下来的图片可能有这个bug另一个是看看是不是做了填充如果你的svg是不封闭的可能直接被填满了也看不出来是什么图片。