批量打印图片不显示的问题

最近有个需求：批量打印个人信息卡，卡片内容有个人头像和背景图片等。

实现过程中出现的问题：图片偶发性加载一半或者完全没有图片。

解决：等待图片完全加载完毕才调用打印方法。

实现如下：

//html部分

<div class="infoCard"   v-for="(item,index) in dataList" :key="item.id" class="bgPic">

<img @load="loadImg" :src="item.imageUrl>

<div style="page-break-before: always"></div>  --分页

</div>

//js部分：加载完成才打印

loadImg(val){
 this.imgList.push(val);
  if(this.imgList.length==this.dataList.length){
    window.print();
    this.imgList=[]
    ...
  }
},

//css部分：每个分页背景图设置

.bgPic{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../../assets/img/bg/infoBgPic.jpg');
  padding:20px;
  box-sizing: border-box;
  margin-bottom: 20px;//分页的缝隙，否则会导致分页图片内容上移
}