CODEWITHSUNDEEP
javascriptangulartypescriptbase64
Carlos Quiñones
Carlos Quiñones

Reputation: 5

How to put a base64 image on a mat-card in Angular 8

I am making a web application with backend in spring boot and mysql. I have a model with a Lob attribute that stores an image in base64 format (coming from the frontend). Now I want to bring that model and put its data on a mat-card. I get to put the other attributes, but not the image.

Here is my TS

import { ToyService } from 'src/app/services/toy-service';
import { Toy } from 'src/app/services/models/toy';
import { Router } from '@angular/router';

@Component({
  selector: 'app-toys',
  templateUrl: './toys.component.html',
  styleUrls: ['./toys.component.css']
})
export class ToysComponent implements OnInit {

  toy = new Toy()
  toys = [];
  toysImages = [];
  imageUrl: string;


  image;



  constructor(private toyService: ToyService, private router: Router) { }

  ngOnInit() {
    this.loadToys();
  }



  public loadToys() {
    this.toyService.readPolicies().subscribe((toys: Toy[]) => {
      this.toys = toys;      
      this.castingImages(toys)
    })

  }
  //Here, i try to decode de base64 to a image
  public castingImages(toys: Toy[]) {    

    for (let i = 0; i < toys.length; i++) { 

        this.image = new Image()
        this.image.src = toys[i].picture;

        toys[i].picture = this.image.src      

    }
  }


  redirect() {
    this.router.navigate(['./toys']);
  }

}

And here my HTML


    <ng-container *ngFor="let card of toys">
        <mat-card class="example-card">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>{{card.id}}</mat-card-title>
                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
            </mat-card-header>



            <!-- And i want to do something like... -->
            <img mat-card-image
                src={{card.picture}}>



            <mat-card-content>
                <p>
                    {{card.name}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <button mat-button>LIKE</button>
                <button mat-button>SHARE</button>
            </mat-card-actions>
        </mat-card>
    </ng-container>

</div>
<mat-divider></mat-divider>```

Thank you so much.

Upvotes: 0

Views: 1374

Answers (1)

Barremian
Barremian

Reputation: 31125

You could try the following

import { DomSanitizer } from '@angular/platform-browser';

export class ToysComponent implements OnInit {
  constructor(private toyService: ToyService, private router: Router, private sanitizer: DomSanitizer) { }

  public castingImages(toys: Toy[]) {    
    for (let i = 0; i < toys.length - 1; i++) { 
      toys[i].picture = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64, ' + toys[i].picture);
    }
  }
}

And in the template you could call the function to sanitize the url

<img mat-card-image [src]="card.picture">

Upvotes: 1

Related Questions