[前端]打印预览图片问题

问题：浏览器非打印预览页面能够显示图片，但调用print()方法进入打印预览界面时，只有谷歌显示图片，其他主流浏览器均不显示，如图：

非打印页：

进入打印页后：图片消失

主要代码如下(修改前)：

<!-- 图片 -->
<div style="display: inline-block;margin-right: 50px;">
    <img style="width: 200px" src="@/assets/images/fuwuhao.png" alt="">
    <div style="font-size: 10.5px;font-family: '宋体';">服务号</div>
</div>
<div style="display: inline-block;margin-right: 50px;">
    <img style="width: 200px" src="@/assets/images/dingyuehao.png" alt="">
    <div style="font-size: 10.5px;font-family: '宋体';">订阅号</div>
</div>

<!-- 打印js-->
let resumeWindow = iframe.contentWindow
if (!window.showModalDialog) {
    resumeWindow.print()
} else {
    // 兼容IE8,不加前面这两句,只能打印出整个页面的预览效果,并不是简历原件的内容
    resumeWindow.document.body.className += ' ext-ie'
    resumeWindow.document.execCommand('print', false, null)
    resumeWindow.print()
}

原因：图片加载需要时间，上述代码在图片为加载完就调用了print()方法

解决方案：用setTimeout()预留加载时间，我这边添加100ms，就可以在让图片有时间加载完再去调用print()

参考链接：
解决方案
Window setTimeout() 方法

修改后代码

let resumeWindow = iframe.contentWindow
if (!window.showModalDialog) {
    setTimeout(function (){
        resumeWindow.print()
    },100)
} else {
    // 兼容IE8,不加前面这两句,只能打印出整个页面的预览效果,并不是简历原件的内容
    resumeWindow.document.body.className += ' ext-ie'
    resumeWindow.document.execCommand('print', false, null)
    setTimeout(function (){
        resumeWindow.print()
    },100)
}

效果：