vue使用echarts-legend-icon自定义图标路径错误问题

 The dream is near  

于 2019-11-06 14:36:41 发布

阅读量1.3k

点赞数 1

分类专栏：前端实践文章标签： vue echarts

本文链接：https://blog.youkuaiyun.com/weixin_44988028/article/details/102934380

版权

前端实践专栏收录该内容

11 篇文章

订阅专栏

在Vue项目中使用ECharts时，若要自定义legend图标且避免因webpack构建导致的图片路径错误，可以采取以下方法：1) 使用`require`引入图片并确保路径正确；2) 将图片放入`static`文件夹直接引用；3) 通过`import`导入图片。这三种方式均能成功显示自定义的legend图标。

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

除了static文件夹，图片放在其他文件夹都会被webpack构建，如改成base64的格式。因此js就会找不到图片路径。

因此，如果要正确引入图片有以下几种方法：

1、使用require，使用如图正确路径所示方式展示。

icon:('image://'+require("../../../assets/images/driveless/right/right_img7.png")+'')

在这里插入图片描述

2、将图片放在static文件夹下引用。

icon:('image://../../../../static/images/driveless/right/right_img7.png'

在这里插入图片描述

3、使用import

 import imgSrc2 from "../../../assets/images/driveless/right/right_img7.png";
 ...
 icon:('image://'+imgSrc2+'')
 ...

三种方法均能成功展示：
在这里插入图片描述