คำนำ
ในงานพัฒนาประจำวันมีข้อกำหนดมากมายในการแสดงรูปภาพบนหน้าเว็บ บางครั้งเส้นทางที่อยู่ของภาพถูกตั้งค่าโดยสคริปต์ของลูกค้า (อาจดึงมาจากฐานข้อมูล)
นี่คือยุคของ AngularJs เมื่อเราต้องการใช้ AngularJs เพื่อแสดงภาพบนหน้าเว็บเราจะใช้: <img src=”path of image”>.
หากเราพิจารณาการนำเสนอเพียงไม่ต้องสงสัยเลยว่ามันโอเค แต่ข้อผิดพลาด 404 (ไม่พบ) จะแสดงในคอนโซลของเบราว์เซอร์
เพื่อแก้ปัญหานี้เราต้องใช้ ng-Src ก่อนที่จะใช้ ng-Src ฉันต้องการทำซ้ำว่าเกิดข้อผิดพลาดนี้อย่างไร
รหัสตัวอย่างมีดังนี้:
ซอร์สโค้ดตัวอย่าง
script.js
var testapp = angular .module ("testmodule", []). controller ("testController", ฟังก์ชั่น ($ scope) {var iment = {ชื่อ: "cat", สี: "สีขาว", รูปภาพ: "/images/cat.jpg",}; $ scope.animal = สัตว์;};index.html
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> /> สี: {{iment.color}} <br /> <img src = "{iment.picture}}" /> </div> </body> </html> ในตัวอย่างข้างต้นมีคลาส animal ที่มีคุณสมบัติสามประการ ได้แก่ Name Color และ Picture และได้รับค่าที่ได้รับมอบหมาย การใช้เครื่องผูกแบบจำลองฉันใช้คุณสมบัติเหล่านี้บนหน้า สำหรับรูปภาพฉันใช้แท็ก <img> HTML
จากนั้นเรียกใช้ตัวอย่างนี้เอฟเฟกต์มีดังนี้:
จากนั้นเปิดคอนโซลของเบราว์เซอร์แล้วคุณจะเห็นข้อผิดพลาดนี้
ไม่สามารถโหลดทรัพยากรได้: สถานะการตอบสนองของเซิร์ฟเวอร์คือ 404 (ไม่พบ)
ดังนั้นคำถามคือทำไมข้อผิดพลาดนี้จึงเกิดขึ้น? ควรแก้ไขได้อย่างไร?
สาเหตุ - เมื่อ DOM ถูกแยกวิเคราะห์มันจะพยายามรับรูปภาพจากเซิร์ฟเวอร์ ในเวลานี้นิพจน์การเชื่อมโยง AngularJS {{ model }} บนแอตทริบิวต์ src ยังไม่ถูกดำเนินการดังนั้นจึงไม่พบข้อผิดพลาด 404
โซลูชัน - เวอร์ชันโซลูชันคือ: ใช้ ng-Src แทนแอตทริบิวต์ src ในรูปภาพ หลังจากใช้คำสั่งนี้คำขอจะออกหลังจาก Angular ดำเนินการนิพจน์ที่มีผลผูกพันนี้เท่านั้น
ตัวอย่างของการใช้ NG-SRC มีดังนี้:
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> /> color: {{iment.color}} <br /> <img ng-src = "{iment.picture}}" /> </div> </body> </html> ตอนนี้คุณเปิดคอนโซลของเบราว์เซอร์อีกครั้งมันจะไม่ปรากฏขึ้น: 404 ไม่พบนี่เป็นเพราะใช้ ng-Src
คำนิยาม
ng-Src- -คำสั่งนี้แทนที่แอตทริบิวต์ดั้งเดิมของ src ขององค์ประกอบ <img />
สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าคุณจะชอบมัน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร