Jaki jest odpowiednik ngSrc w nowszym Angular?

Chciałbym zaimplementować img, z src pochodzącym z obiektu JSON.

W AngularJS mogłem zrobić:

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

Czy istnieje odpowiednik tego w Angular 2+?

AngularJS:

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

Angular 2+:

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

Angular Docs

Zauważ, że interpolacja może dać ten sam wynik:

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

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

Nie ma technicznej różnicy między tymi dwoma oświadczeniami dotyczącymi wiążącego majątku, o ile nie chcesz, aby wiązano dwustronnie.

W wielu przypadkach interpolacja jest wygodną alternatywą dla powiązania właściwości. W rzeczywistości Angular tłumaczy te interpolacje na odpowiednie powiązania właściwości przed renderowaniem widoku. źródło

Osiągnięcie tej samej funkcjonalności, co ng-src w aplikacji Angular to proces dwuetapowy.

Pierwszy krok:

W swoim kodzie HTML użyj nowej składni:

<img [src]="imageSrc">

Drugi krok:

W składniku / dyrektywie zainicjuj wartość, aby była pusta . Na przykład:

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

Teraz wyeliminowałoby to nullwywołanie sieciowe (połączenie puste) z powodu nie ustawiania wartości elementu.

Można go również zapisać w formie interpolacji, na przykład:

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