1

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)"> 
Avinash
  • 1,245
  • 11
  • 19

0 Answers0