vue + iview Table表头中插入图片

正常代码中这样引入图片前端可以正常显示:

 <img style="width: 100px"  src="../../../assets/report.png">

但是在iview 组件的Table表头中插入图片，官方文档没有给出相应的示例，考虑使用renderHeader 函数渲染头部，参考：https://blog.csdn.net/single_cong/article/details/81807834于是有了下面的代码，但是图片死活出不来

columns: [
                {
                    type: 'index',
                    align: 'center',
                    title: '序号',
                    key: 'id',
                    fixed: 'left',
                    width: 65,
                },  {
                    slot: 'scoreChange',
                    minWidth: 200,
                    renderHeader: (h) => h('div', [
                        h('span', '哈哈哈哈哈哈'),
                        h('img', {
                            attrs: {
                                src: '../../../assets/report.png'
                            },
                            style: {
                                width: '100px'
                            }
                        })
                    ])
                }, {
                    title: 'action',
                    align: 'center',
                    slot: 'action',
                    width: 150,
                    fixed: 'right'
                }
            ],

于是继续百度发现https://blog.csdn.net/qq_41115965/article/details/80796211修改后完美显示：

{
                    slot: 'scoreChange',
                    minWidth: 200,
                    renderHeader: (h) => h('div', [
                        h('span', '哈哈哈哈哈哈'),
                        h('img', {
                            attrs: {
                                src: require('../../../assets/report.png')
                            },
                            style: {
                                width: '100px'
                            }
                        })
                    ])
                }

成功后截图：

事后想想这应该是一个前端最基本的操作，却捣鼓了一天；终究还是自己前端会的太少，需要续断的学习和积累才是硬道理。记录一下自己，以便自己以后复习，写的不好还请多多指教