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張圖片？