Was entspricht ngSrc im neueren Angular?

Ich möchte img implementieren, wobei ein src vom JSON-Objekt stammt.

In AngularJS könnte ich Folgendes tun:

<img ng-src="{{hash}}" alt="Description" />

Gibt es ein Äquivalent dazu in Angular 2+?

AngularJS:

<img ng-src="{{movie.imageurl}}">

Winkel 2+:

<img [src]="movie.imageurl">

Angular docs

Beachten Sie, dass durch Interpolation dasselbe Ergebnis erzielt werden kann:

<img src="{{vehicle.imageUrl}}">

<img [src]="vehicle.imageUrl">

Es gibt keinen technischen Unterschied zwischen diesen beiden Aussagen für die Eigenschaftsbindung, solange Sie keine bidirektionale Bindung wünschen.

Interpolation ist in vielen Fällen eine bequeme Alternative für die Eigenschaftsbindung. Tatsächlich übersetzt Angular diese Interpolationen in die entsprechenden Eigenschaftsbindungen, bevor die Ansicht gerendert wird. Quelle

Es ist ein zweistufiger Prozess, um die gleiche Funktionalität von ng-src in Ihrer Angular-Anwendung zu erreichen.

Erster Schritt:

Verwenden Sie in Ihrem HTML die neue Syntax:

<img [src]="imageSrc">

Zweiter Schritt:

Initialisieren Sie in Ihrer Komponente / Direktive den Wert so, dass er leer ist . Beispielsweise:

@Component({
  selector: 'ag-video',
  templateUrl: './video.component.html'
})
export class SampleComponent {
   imageSrc = '';
}

Dies würde nun den nullNetzwerkaufruf (leeren Anruf) eliminieren , da der Wert nicht auf das Element gesetzt ist.

Es kann auch in Interpolationsform geschrieben werden wie:

<img src="{{movie.imageurl}}">

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>