Quel est l'équivalent de ngSrc dans le plus récent Angular?

92

Je voudrais implémenter img, avec un src provenant d'un objet JSON.

Dans AngularJS, je pourrais faire:

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

Y a-t-il un équivalent à cela dans Angular 2+?

angular

— uksz
source

179

AngularJS:

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

Angulaire 2+:

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

Documents angulaires

Notez que l'interpolation peut aboutir au même résultat:

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

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

Il n'y a aucune différence technique entre ces deux instructions pour la liaison de propriété, tant que vous ne souhaitez pas de liaison bidirectionnelle.

L'interpolation est une alternative pratique pour la liaison de propriété dans de nombreux cas. En fait, Angular traduit ces interpolations dans les liaisons de propriétés correspondantes avant de rendre la vue. la source

— Excité
source

9

donc, ce n'est pas équivalent à ng-src, car ng-src évite de charger l'image avant que ng-src n'ait une valeur

— Sebastián Rojas

Comme Sebastian l'a dit! Ce n'est pas égal car des éléments comme video/audioet peu d'autres ne devraient pas avoir attributesde valeur. ng-srcn'est pas équivalent à cela[src]

— Nikhilesh Shivarathri

8

Il s'agit d'un processus en deux étapes pour obtenir les mêmes fonctionnalités que ng-src dans votre application Angular.

Premier pas:

Dans votre HTML, utilisez la nouvelle syntaxe:

<img [src]="imageSrc">

Deuxième étape:

Dans votre composant / directive, initialisez la valeur pour qu'elle soit vide . Par exemple:

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

Maintenant, cela éliminerait l' nullappel réseau (appel vide) car la valeur n'est pas définie sur l'élément.

— Nikhilesh Shivarathri
source

3

Il peut également être écrit sous forme d'interpolation comme:

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

— Raksha Bhartiya
source

3

pourquoi pas?? 54321

— Bartho Bernsmann

1

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

— Shashwat Gupta
source

Évalué car il ne s'agit pas de la solution recommandée, car elle crée une requête en échec à: img.youtube.com/vi {{post.youtubeVideoId}} / default.jpg.

— Jamie

Crée une requête échouante! D'accord.

— Nikhilesh Shivarathri