图片失效 向浏览器声明图片问题

 icon:"image://${img}"

用image://${img} 的方式告诉浏览器这是图片,方便解析避免出现解析不了 或者解析错误的问题

        data:[{name:dataList[0].name,icon:`image://${symbol[0]}`},
{name:dataList[1].name,icon:`image://${symbol[1]}`},
{name:dataList[2].name,icon:`image://${symbol[2]}`}],

 

`image://${symbol[2]}`

 也可以对import引入的图片进行声明:

复制代码
import bluePoint from './assets/bluePoint.png';
import greenPoint from './assets/greenPoint.png';


data: dataList.map((item, index) => {
          return {
            name: item.name,
            icon: `image://${index == 0 ? bluePoint : greenPoint}`,//echart 的icon属性极为脆弱很难解析出来你放入的东西是什么,所以经常会用到  `image://${img}`  
  }; }),
复制代码

 //这种方式也可

'image://' + require('./imgs/barTop.png'),'image://' + require('./imgs/barTop.png'),

 

posted @   SimoonJia  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示