我向服务器发出请求并获取图片的url字符串，在组件内部我将url转换为Base64字符串。下面是这样做的代码：“我从一个答案中复制了它，但在我的历史记录中找不到它来指定作者”。

getBase64Image(img: HTMLImageElement) {
    // We create a HTML canvas object that will create a 2d image
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    // This will draw image    
    ctx.drawImage(img, 0, 0);
    // Convert the drawn image to Data URL
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

  getBase64ImageFromURL(url: string) {
    return new Observable((observer: Observer<string>) => {
      // create an image object
      let img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = url;
      if (!img.complete) {
        // This will call another method that will create image from url
        img.onload = () => {
          observer.next(this.getBase64Image(img));
          observer.complete();
        };
        img.onerror = (err) => {
          observer.error(err);
        };
      } else {
        observer.next(this.getBase64Image(img));
        observer.complete();
      }
    });
  }

在html页面中

<div style="background-image:url({{item.imageKey}}); ">
</div>

映像的输出约为800KB
然后将base64字符串存储在indexeddb表中，然后从表中检索字符串并显示出来。我做这些麻烦的目的是为了让网站在以后访问时加载得更快。但这并不是我所期望的，因为绘制图像确实需要几秒钟。对于一些包含较少图像的页面来说，这是合理的，但在其他页面上会变得很难看。有没有更有效的方法？