Kata pengantar
Dalam pekerjaan pengembangan harian, ada banyak persyaratan untuk menampilkan beberapa gambar di halaman. Terkadang, jalur alamat gambar ditetapkan oleh skrip klien (dapat diambil dari database).
Ini adalah era AngularJS. Ketika kami ingin menggunakan AngularJS untuk menampilkan gambar di halaman, kami hanya akan menggunakan: <img src=”path of image”>.
Jika kita hanya mempertimbangkan presentasi, tidak ada keraguan bahwa tidak apa -apa, tetapi kesalahan 404 (tidak ditemukan) akan ditampilkan di konsol browser.
Untuk mengatasi masalah ini, kita perlu menggunakan ng-Src . Sebelum menggunakan ng-Src , saya ingin mereproduksi bagaimana kesalahan ini terjadi.
Kode sampel adalah sebagai berikut:
Kode Sumber Sampel
Script.js
var testApp = Angular .module ("testModule", []) .controller ("testController", function ($ scope) {var hewan = {nama: "cat", warna: "putih", gambar: "/images/cat.jpg",}; $ scope.animal = hewan;});Index.html
<html ng-app = "testModule"> <head> <itement> </title> <script src = "scripts/angular.min.js"> </script> <skrip src = "skrip/js/script.js"> </script> </head> <body> <div ng-controller = "oMer {{oM name/heador {{oM name {BODM/JS/JS/JS/SCRIPTROLER =" Warna: {{animal.color}} <br/> <img src = "{{animal.picture}}"/> </div> </body> </html> Dalam contoh di atas, ada kelas animal yang memiliki tiga properti: Name , Color dan Picture , dan telah diberi nilai. Menggunakan pengikat model, saya menggunakan properti ini pada halaman. Untuk gambar, saya menggunakan tag <img> html.
Kemudian jalankan contoh ini, efeknya adalah sebagai berikut:
Kemudian buka konsol browser dan Anda akan melihat kesalahan ini.
Tidak dapat memuat sumber daya: Status respons server adalah 404 (tidak ditemukan).
Jadi pertanyaannya adalah, mengapa kesalahan ini terjadi? Bagaimana seharusnya diselesaikan?
Penyebab - Ketika DOM diuraikan, ia akan mencoba mendapatkan gambar dari server. Pada saat ini, ekspresi pengikat AngularJS {{ model }} pada atribut src belum dieksekusi, sehingga kesalahan 404 tidak ditemukan terjadi.
Solusi- Versi solusinya adalah: Gunakan ng-Src alih-alih atribut src dalam gambar. Setelah menggunakan arahan ini, permintaan hanya akan dikeluarkan setelah Angular mengeksekusi ekspresi pengikatan ini.
Contoh menggunakan NG-SRC adalah sebagai berikut:
<html ng-app = "testModule"> <head> <itement> </title> <script src = "scripts/angular.min.js"> </script> <skrip src = "skrip/js/script.js"> </script> </head> <body> <div ng-controller = "oMer {{oM name/heador {{oM name {BODM/JS/JS/JS/SCRIPTROLER =" Color: {{animal.color}} <br/> <img ng-src = "{{animal.picture}}"/> </div> </body> </html> Sekarang setelah Anda membuka konsol browser lagi, itu tidak akan muncul: 404 tidak ditemukan, ini karena ng-Src digunakan.
definisi
ng-Src- -Terik ini mengesampingkan atribut asli src dari elemen <img /> .
Meringkaskan
Di atas adalah seluruh konten artikel ini. Saya harap Anda menyukainya. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.