Penggunaan ng-src vs src

89

Tutorial ini mendemonstrasikan penggunaan direktif ngSrcalih-alih src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Mereka meminta untuk:

Ganti direktif ng-src dengan atribut src biasa yang lama.
Menggunakan alat seperti Firebug, atau Chrome Web Inspector, atau memeriksa log akses server web, mengonfirmasi bahwa aplikasi memang membuat permintaan asing ke /app/%7B%7Bphone.imageUrl%7D%7D (atau / app / {{phone .imageUrl}} ).

Saya melakukannya dan itu memberi saya hasil yang benar:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

Apakah ada alasannya mengapa?

angularjs Majid Laissi
sumber
2
docs.angularjs.org/api/ng/directive/ngSrc
PSL

Jawaban:

108 
<img ng-src="{{phone.imageUrl}}">

Ini memberi Anda hasil yang diharapkan, karena phone.imageUrldievaluasi dan diganti dengan nilainya setelah angular dimuat.

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

Tapi dengan ini, browser mencoba memuat gambar bernama {{phone.imageUrl}}, yang mengakibatkan permintaan gagal. Anda dapat memeriksanya di konsol browser Anda.

Thierry
sumber
Saya pikir itu sebenarnya hanya akan mencoba memuat gambar seperti src = "" daripada {{phone.imageUrl}}.
Jeff Ling
2
@JeffLing tidak sebenarnya ini adalah `{{phone.imageUrl}}` seperti yang dinyatakan dalam tutorial. Saya tidak mengerti bahwa browser melakukan permintaan http pertama sebelum angularjs dimulai. Sekarang saya mengerti.
Majid Laissi
Hai, saya rasa ini adalah solusi yang buruk karena saya melakukan cara ini untuk beberapa waktu dan menemukan bahwa metode ini tidak berfungsi pada browser IE lama, jadi rekomendasi saya adalah menggunakan ng-src
imal hasaranga perera
Saat ini saya mengalami masalah saat mengisi ng-src melalui direktif dan menggunakan $ element.attr ('ng-src', this.imageSrc); .... tahu kenapa? Nilai gambarnya benar, saya rasa saya harus mengeksekusi sebuah scope. $ Apply atau digest nanti ... tapi tidak tahu dimana ...
Micky
127

Dari Angular docs

Cara buggy untuk menulisnya:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

Cara yang benar untuk menulisnya:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Mengapa? Ini karena saat memuat halaman, sebelum bootstrap sudut dan pembuatan pengontrol, browser akan mencoba memuat gambar dari http://www.gravatar.com/avatar/{{hash}}dan itu akan gagal. Kemudian setelah sudut dimulai, ia memahami bahwa itu {{hash}}harus diganti dengan say logo.png, sekarang atribut src berubah menjadi http://www.gravatar.com/avatar/logo.pngdan gambar dimuat dengan benar. Masalahnya adalah ada 2 permintaan yang masuk dan yang pertama gagal.

Untuk mengatasi ini kita harus menggunakan ng-srcyang merupakan direktif sudut dan sudut akan mengganti ng-srcnilai menjadi atribut src hanya setelah bootstrap sudut dan pengontrol terisi penuh, dan pada saat {{hash}}itu sudah akan diganti dengan nilai lingkup yang benar.

Subin Sebastian
sumber
17

Ini src="{{phone.imageUrl}}"tidak perlu dan membuat permintaan tambahan oleh browser. Browser akan membuat setidaknya 2 GETpermintaan saat mencoba memuat gambar itu:

  1. sebelum ekspresi dievaluasi {{phone.imageUrl}}
  2. setelah ekspresi dievaluasi img/phones/motorola-xoom.0.jpg

Anda harus selalu menggunakan ng-srcdirektif saat berhadapan dengan ekspresi Angular. <img ng-src="{{phone.imageUrl}}">memberi Anda hasil yang diharapkan dari satu permintaan.

Di samping catatan , hal yang sama berlaku ng-hrefagar Anda tidak mendapatkan tautan yang rusak sampai siklus intisari pertama dimulai.

letiagoalves
sumber
0

Sebenarnya ini 100% masuk akal karena HTML diproses secara berurutan dan ketika halaman HTML ini sedang diproses baris demi baris, pada saat halaman tersebut sampai ke gambar ini, garis dan pemrosesan gambar, kita phone.imageUrlbelum ditentukan.

Faktanya, Angular JS belum memproses potongan HTML ini, dan belum mencari placeholder ini dan mengganti ekspresi ini dengan nilai. Jadi yang akhirnya terjadi adalah browser mendapatkan baris ini dan mencoba mengambil gambar ini di URL ini.

Dan tentu saja ini adalah URL palsu, jika masih memiliki kumis dan tanda kurung kurawal di dalamnya, dan karena itu memberi Anda 404, tapi sekali tentu saja Angular menangani ini, itu menggantikan URL ini dengan yang benar, dan kemudian kami masih melihat gambar, namun pesan kesalahan 404 tetap ada di konsol kami.

Jadi, bagaimana kita bisa menangani ini? Yah, kita tidak bisa menangani ini dengan menggunakan trik HTML biasa. Tapi, kita bisa mengatasinya dengan Angular. Kami harus memberi tahu browser untuk tidak mencoba mengambil URL ini, tetapi pada saat yang sama mengambilnya hanya saat Angular siap untuk interpretasi placeholder ini.

Nah, salah satu cara untuk melakukannya adalah dengan menempatkan atribut Angular di sini, bukan HTML standar. Dan atribut Angular itu adil ng-src. Jadi jika kita mengatakannya sekarang, kembali, Anda akan melihat bahwa tidak ada kesalahan lagi karena gambar hanya diambil setelah Angular mendapatkan HTML ini dan menerjemahkan semua ekspresi ke dalam nilainya.

Divyanshu Rawat
sumber