Display images of different formats from base64 from backend api - angular 7

Question

I'm having an api where I'll get image in base64 format, it can in any of the formats(.png, .jpg, .svg etc...).

I want to display the images in my application using:

  <img *ngIf="imageBase64" [src]="imageBase64 ? ('data:image/svg+xml ;base64,' +imageBase64 | safe) : ''" alt="" />

How can I display images in different formats in the best way possible.

Thanks in advance.

Example

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI+DQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI+DQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8+DQo8L2c+DQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8+DQo8L2c+DQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8+DQo8L2c+DQo8L3N2Zz4=

The above is a base64 format of .svg file.

so in src property binding if I give data:image/svg+xml, it will work, I need a generic format to print image even if it is png format etc...

like data:image/svg+xml/png/jpg etc... which is not working

What format is the variable imageBase64? can you give an example? — callback
@callback its in base64 format and it may contain any image format such as svg or png etc.. — Anil Kumar Reddy A

callback callback · Accepted Answer · 2019-08-13T08:50:08

You'd have to create a function that first decodes the encoded string, and then extracts the type from the decoded string provided a finite set of type options.

getType(imageBase64) { 
    let extension = undefined; 
    const decodedString = window.atob(imageBase64); //decode the string;
    const lowerCase = decodedString.toLowerCase();
    // find the extension in the decoded string
    if (lowerCase.indexOf("png") !== -1) extension = "png"
    else if (lowerCase.indexOf("svg") !== -1) extension = "svg+xml"
    else if (lowerCase.indexOf("jpg") !== -1 || lowerCase.indexOf("jpeg") !== -1)
        extension = "jpg"
    // add more cases if needed..
    return extension;
}

Then use this function in your template.

<img *ngIf="imageBase64" [src]="imageBase64 ? ('data:image/' + getType(imageBase64) + ';base64,' +imageBase64 | safe) : ''" alt="" />

Display images of different formats from base64 from backend api - angular 7

2 Answers