Show base64 Image in HTML Angular 13 | Angular 13 Tutorial

Share the post

Hello All, In this tutorial we will learn How to Show base64 Image in HTML Angular 13. In the last Angular 13 Tutorial, We had discussed How to do OTP number validation in angular 13.

Now, In this tutorial, We will take ready-made base64 code & set the image tag in HTML to display the Image. For base64, I have already created base64 for my logo. So, let’s learn How to Show base64 Image in HTML Angular 13.

How to Show base64 Image in HTML Angular 13

Now, If you don’t have base64 ready with you, then first go to this site & create base64 from any Image.

Copy the below code in your app.component.html

<div>
  <img *ngIf="logo" src="data:image/png;base64,{{logo}}" (click)="showBase64()" />
</div>

Now, copy the below code in your app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  logo: any;

  constructor() {
    this.logo = `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`
  }

  showBase64() {
    console.log(this.logo);
  }

}

Run the Angular Application Using the following command

npm run start

Check the output

Show base64 Image in HTML Angular 13 Output
Show base64 Image in HTML Angular 13 Output

If you want to set the CSS you can set it into app.component.scss file.

Leave a Comment