Как отобразить изображения, которые находятся в таблице TS

Question

Я пытаюсь отобразить из файла html изображения, которые находятся в таблице в формате .ts.

Вот моя таблица:

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

Когда вы передаете этот элемент:

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

Answer 4

Я думаю, вы должны использовать DomSanitizer;

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

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