Che cosa è equivalente a ngSrc in Angular2?

Question

Vorrei implementare img, con un src proveniente dall'oggetto JSON.

In angular1, ho potuto fare:

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

Esiste un equivalente a questo in Angular2?

Answer 1

angolare 1:

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

angolare 2 & 4:

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

Angular docs

---

noti che l'interpolazione può ottenere lo stesso risultato:

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

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

Non esiste alcuna differenza tecnica tra queste due istruzioni per l'associazione di proprietà, purché non si desideri il binding a due vie.

L'interpolazione è un'alternativa conveniente per l'associazione di proprietà in molti casi . Infatti, Angular traduce tali interpolazioni nei binding di proprietà corrispondenti prima di rendere la vista. source

Answer 2

Può anche essere scritto in forma di interpolazione come:

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

Answer 3

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

Answer 4

Si tratta di un processo in due fasi per ottenere la stessa funzionalità di ng-src nell'applicazione angolare

Primo passaggio:

nel codice HTML,

<img [src]="imageSrc">

Secondo passo:

nel componente/direttiva, inizializzare il valore di essere vuoto. Ad esempio

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

Ora, verrebbe meno la chiamata null rete (chiamata vuoto) per il valore non sia impostato su all'elemento.

Spero che questo aiuti !!!