如何显示 ts 表中的图像

Question

我正在尝试从 .ts 表中的 html 文件图像中显示。

这是我的表格：

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"),
];

与类：

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>

但没有一个奏效..

所以我有点迷茫，我可以用一些帮助吗？

谢谢！

Answer 1

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

像这样声明你的类：

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

工作演示

Answer 2

你必须使用这样的语法 -

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

Answer 3

我认为你应该使用DomSanitizer;

import { DomSanitizer } from '@angular/platform-browser';  
constructor(private sanitizer: DomSanitizer){
this.imgSrc = this.sanitizer.bypassSecurityTrustResourceUrl(yourSrc);
}

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