I am fetching the image URL from the database table and trying to show the image in tag but I am getting an error:- Hide Copy Code
sanitizing unsafe URL value
if have used Hide Copy Code
sanitizer.bypassSecurityTrustUrl()
After that the error has been removed but the image is still not been shown.
Here is my code of Component:-
import { Component, OnInit} from '@angular/core';
import { data } from '../Classes/edata';
import { dservice } from '../Service/dataservice';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
emp:data[];
constructor(private _eservice:dservice , private sanitizer:DomSanitizer){}
public getSantizeUrl(url:string){
alert(url);
return this.sanitizer.bypassSecurityTrustUrl(url);
}
ngOnInit() {
this.load();
}
load(){
this._eservice.getdata().subscribe((edata)=>this.emp=edata);
}
}
class model:-
export class data
{
id:number;
name:string;
adress:string;
pic:string;
}
Html View:-
<div class="col-md-4 col-sm-6" *ngFor="let e of emp | paginate: {itemsPerPage:5, currentPage:p}">
<div class="property-card card">
<div class="property-card-header image-box">
<img src="{{e.pic}}">
What i tried
<img [src]="getSantizeUrl(e.pic)">