如何显示 ts table 中的图像

Question

我正在尝试显示来自 html 文件的图像，这些图像位于 .ts.table 中。

这是我的 table:

BHs = [
  new Bh (1, "src/assets/img/photo_bonhommes/BH1.jpg"),
  new Bh (2, "src/assets/img/photo_bonhommes/BH2.png"),
  new Bh (3, "src/assets/img/photo_bonhommes/BH3.png"),
  new Bh (4, "src/assets/img/photo_bonhommes/BH4.png"),
  new Bh (5, "src/assets/img/photo_bonhommes/BH5.png"),
  new Bh (6, "src/assets/img/photo_bonhommes/BH6.png"),
  new Bh (7, "src/assets/img/photo_bonhommes/BH7.png"),
  new Bh (8, "src/assets/img/photo_bonhommes/BH8.png"),
  new Bh (9, "src/assets/img/photo_bonhommes/BH9.png"),
  new Bh (10, "src/assets/img/photo_bonhommes/BH10.png"),
  new Bh (11, "src/assets/img/photo_bonhommes/BH11.png"),
];

与 class :

 export class Bh {
  constructor(
    id: number,
    src: String,
  ){}
 }

这是我的 html 行：

<img id="bh" routerLink="/" *ngFor="let bh of BHs" src="bh.src"/> 
{{bh.src}}

我见过遇到同样问题的人，所以我尝试了：

<img id="bh" routerLink="/" *ngFor="let bh of BHs" src="bh.src"/>

<img id="bh" routerLink="/" *ngFor="let bh of BHs" src="{bh.src}"/>

<div *ngFor="let bh of BHs">
    <img id="bh" routerLink="/" [src]='bh.src'/>
</div>

但是 none 有效..

所以我有点迷茫，我需要一些帮助吗？

非常感谢！

Answer 1

我认为你应该使用 DomSanitizer；

import { DomSanitizer } from '@angular/platform-browser';  
  constructor(private sanitizer: DomSanitizer){

    this.imgSrc = this.sanitizer.bypassSecurityTrustResourceUrl(yourSrc);
}

Answer 2

问题不在于图像绑定，您的 class 未正确定义，在您的代码中，如果您只是 console.log(BHs)，您将得到没有数据的空对象，因此 bh.src 未定义

像这样声明您的class：

 export class Bh {
  constructor(
    id: number,
    src: String,
  ){
      Object.assign(this, {id:id, src:src});
   }
 }

Working Demo

Answer 3

你必须使用这样的语法 -

<img id="bh" routerLink="/" *ngFor="let bh of BHs" [src]="bh?.src" />

Answer 4

当你传递这个元素时:

new Bh (1, "src/assets/img/photo_bonhommes/BH1.jpg"), etc…

然后你在你的模板中调用它，就像这样做:

<img id="bh" routerLink="/" *ngFor="let bh of BHs" src="src/assets/img/photo_bonhommes/BH1.jpg"/>

所以也许你应该删除多余的 src 并只放 /assets/img/photo_bonhommes/….jpg

你可以试试这个：

<img [id]="bh.id" routerLink="/" *ngFor="let bh of BHs" [src]="bh.src"/>

如何显示 ts table 中的图像

How to display Images that are in a ts table

image

display

angular