Wat is equivalent aan ngSrc in de nieuwere Angular?

Ik wil img implementeren, met een src afkomstig van een JSON-object.

In AngularJS zou ik het volgende kunnen doen:

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

Is er een equivalent hiervan in Angular 2+?

Antwoord 1, autoriteit 100%

AngularJS:

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

Hoekig 2+:

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

Hoekige documenten

Merk op dat met interpolatie hetzelfde resultaat kan worden bereikt:

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

Er is geen technisch verschil tussen deze twee verklaringen voor eigendomsbinding, zolang u geen binding in twee richtingen wenst.

Interpolatie is in veel gevallen een handig alternatief voor eigendomsbinding
gevallen. In feite vertaalt Angular die interpolaties in de
overeenkomstige eigenschapsbindingen voordat de weergave wordt weergegeven.
bron

Antwoord 2, autoriteit 5%

Het is een proces in twee stappen om dezelfde functionaliteit van ng-src in uw Angular-toepassing te bereiken.

Eerste stap:

Gebruik in uw HTML de nieuwe syntaxis:

<img [src]="imageSrc">

Tweede stap:

In uw component/richtlijn, initialiseer de waarde zodat deze leegis. Bijvoorbeeld:

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

Dit zou de netwerkaanroep null(lege oproep) elimineren omdat de waarde niet op het element is ingesteld.

Antwoord 3, autoriteit 2%

Het kan ook in interpolatievorm worden geschreven, zoals:

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

Antwoord 4

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">
   <td>
    <img src="{{post.youtubeVideoId}}">
   </td>
   <td>
     {{post.videoName}}
   </td>
</tr>