echarts 柱状图x轴坐标值改为图片，为什么不显示？

Question

需求：项目图标要做成一下x轴坐标值改为自定义图片效果；
问题：为什么我按照以下方法，图片还是不显示？图片路径没有问题，检查很多遍了，同一个页面用了多个图标有冲突，我也注释了其他图标，只留下一个图标，还是不显示，这是为啥？困扰很多天了，请问各位前端大神这是啥原因？

Answer 1

用网络图片，写了个demo：

var weatherIcons = {
    'One': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.nosdn.127.net%2FYmieQe6aKgYlbdjmooksj8XJAdgyDe87evgyTzpZ7OU9Q1541644785423.jpg&refer=http%3A%2F%2Fdingyue.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621996435&t=cb31ad3412cf98fb6894210953c8dc67',
    'Two': 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2624116498,626387632&fm=11&gp=0.jpg',
    'Three': 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2473728132,3219483308&fm=26&gp=0.jpg'
};

option = {
    xAxis: {
        type: 'category',
        data: ['One', 'Two', 'Three'],
        axisLabel: {
            formatter: function (value) {
                return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 10,
            rich: {
                value: {
                    lineHeight: 30,
                    align: 'center'
                },
                One: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.One
                    }
                },
                Two: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Two
                    }
                },
                Three: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Three
                    }
                }
            }
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150],
        type: 'bar'
    }]
};

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

按照你的写法 HTML 在根路径，你可以把images前面的 ./ 去掉试试，或者单独去掉 .。
实在不行就写成'image://' + loaction.origin + '/image/icon1.png'。
调试过程关注一下浏览器控制台有没有报包含疑似图片路径的错误。