图片失效 向浏览器声明图片问题
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'),