如何判断图片加载完成

项目场景：

项目场景：在实现人机对话界面的过程中，有一个功能点 — 内容超过指定高度添加‘展开-收起功能’。

问题描述

临时添加‘‘展开-收起’’功能。所以简单的通过话术内容所在的div的高度判断是否展示‘展开-收起’按钮。
由于机器人的话术配置支持富文，也就不可避免的支持图片上传（重写了富文本的图片上传功能，图片存储的是对应fileService的地址具体实现可以参考这篇文章），在对话时渲染机器人话术通过Vue的v-html渲染富文本内容。
那么问题来了，判断div高度的时候，如果可视区域内存在图片，就会造成判断错误。那么在图片加载完成之后再去判断div的高度不就可以解决问题了。那如何判断图片加载完了呢？

解决方案：判断图片加载完成

封装了一个方法，来判断图片是否加载完成，直接上代码：

// 图片是否已加载完毕
// pics：接收一个数组，内容为图片地址
 function imgReady(pics: Array<string>) {
  const picsAll = pics.map((imgurl) => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      // 提取图片地址
      img.src = imgurl
        .replace("src=", "")
        .replace("amp;", "")
        .replace(/^['|"](.*)['|"]$/, "$1");
      img.onload = () => resolve(imgurl);
      img.onerror = () => reject(new Error(imgurl + " load error"));
    });
  });
  return Promise.all(picsAll)
    .then(() => {
      return true;
    })
    .catch(() => {
      // TODO 添加重试机制
      return false;
    });
}