Angular 获取 base64 格式的远程图像 URL

Question

我有一个 function 将图像转换为 base64 并返回值。

In.ts 文件：--

async getBase64ImageFromUrl(imageUrl) {
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  var res = await fetch(proxyurl+imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
      // console.log(reader.result); /// getting the base64 image URL here.
      resolve(reader.result);
      return;
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
  
    reader.readAsDataURL(blob);
  })
}

我想获取 HTML 中的值，我知道我做错了什么

<img class="w-100" [src]="getBase64ImageFromUrl('https://dam.dev.catalog.1worldsync.com/im/img/GCP-5129882489061376')"/>

我知道我做错了，想知道正确的方法。

Answer 1

它不是特定于 Angular 的。

通常，如果是png图像，则需要在 base64 字符串前加上data:image/png;base64 。

<img src="data:[<mediatype>][;base64],<data>" />

例子：

 <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

检查这些以获取更多信息：

• 数据 URI
• 如何在HTML中显示Base64张图片？