最近在react项目中用echarts.js想重新定义一个tooltip的展示方式,代码如下:
tooltip : {
trigger: 'item',
formatter: function (params) {
return `<div class="toolDiv">
<div>img src={require('public/img/LeftContent/down.png')}/></div>
<div>
`
}
这个在本地的nodejs环境上面图片是能够正常显示的,但是打包发布到服务器上发现图片加载不出来,目前定位出的问题是
在服务器上加载页面的时候没有加载img图片的资源导致图片显示不出来
解决方案:
ooltip : {
trigger: 'item',
formatter: function (params) {
return `<div class="toolDiv">
<div class="bg-img"></div>
<div>
`
}
在less文件中
.bg-img{
background:url(图片的路径)
}
通过定义里面的class属性,然后在写里面加背景图片图片就可以正常显示