Apa yang setara dengan ngSrc di Angular yang lebih baru?

94

Saya ingin mengimplementasikan img, dengan src berasal dari objek JSON.

Di AngularJS, saya bisa melakukan:

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

Apakah ada yang setara dengan ini di Angular 2+?

uksz
sumber

Jawaban:

182

AngularJS:

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

Angular 2+:

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

Dokumen Angular


Perhatikan bahwa interpolasi dapat mencapai hasil yang sama:

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

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

Tidak ada perbedaan teknis antara kedua pernyataan ini untuk pengikatan properti, selama Anda tidak menginginkan pengikatan dua arah.

Interpolasi adalah alternatif yang nyaman untuk pengikatan properti dalam banyak kasus. Faktanya, Angular menerjemahkan interpolasi tersebut ke dalam pengikatan properti yang sesuai sebelum merender tampilan. sumber

Randy
sumber
9
jadi, ini tidak setara dengan ng-src, karena ng-src menghindari memuat gambar sebelum ng-src memiliki nilai
Sebasti√°n Rojas
Seperti yang dikatakan Sebastian! Itu tidak sama karena elemen suka video/audiodan sedikit lainnya seharusnya tidak memiliki attributesnilai. ng-srctidak setara dengan itu[src]
Nikhilesh Shivarathri
8

Ini adalah proses dua langkah untuk mencapai fungsionalitas ng-src yang sama di aplikasi Angular Anda.

Langkah pertama:

Di HTML Anda, gunakan sintaks baru:

<img [src]="imageSrc">

Tahap kedua:

Di komponen / direktif Anda, inisialisasi nilainya menjadi kosong . Sebagai contoh:

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

Sekarang, ini akan menghilangkan nullpanggilan jaringan (panggilan kosong) karena nilai tidak disetel ke elemen.

Nikhilesh Shivarathri
sumber
3

Dapat juga ditulis dalam bentuk interpolasi seperti:

<img src="{{movie.imageurl}}">
Raksha Bhartiya
sumber
3
kenapa tidak?? 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
sumber
Tidak disukai karena ini bukan solusi yang disarankan karena ini membuat permintaan yang gagal ke: img.youtube.com/vi {{post.youtubeVideoId}} / default.jpg.
Jamie
Membuat permintaan yang gagal! Sepakat.
Nikhilesh Shivarathri