Angular get remote Image URL in base64 format

Question

I have a function that converts a image to base64 and returns the value.

In.ts file:--

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);
  })
}

I wanted to get the value in in the HTML, I know I am doing something wrong

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

I know I am doing it wrong, wanted to know the right way to do this.

Answer 1

It's not Angular specific.

In general, you need to prepend the base64 string with data:image/png;base64 if it was a png image.

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

Example:

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

Check these for more info:

• Data URIs
• How to display Base64 images in HTML?