Question

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

清除不安全的URL值

如果使用过隐藏复制代码

sanitizer.bypassSecurityTrustUrl（）

此后，错误已消除，但图像仍未显示。

这是我的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);
  }
}

类模型：-

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

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

0 个答案: