html - 无法在 angular2 中显示数据库中的图像？

Question

我正在从数据库表中获取图像 URL 并尝试在标记中显示图像，但出现错误：- 隐藏复制代码

清理不安全的 URL 值

如果使用了隐藏复制代码

sanitizer.bypassSecurityTrustUrl()

之后错误已被删除，但图像仍未显示。

这是我的组件代码：-

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);
  }
}

班级模型：-

export class data
{
  id:number;
  name:string;
  adress:string;
  pic:string;
}

html视图：-

<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}}">

我试过的

<img [src]="getSantizeUrl(e.pic)"> 

标签： htmlangular