Sử dụng ng-src so với src

Hướng dẫn này minh họa việc sử dụng chỉ thị ngSrcthay vì src:

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

Họ yêu cầu:

Thay thế chỉ thị ng-src bằng một thuộc tính src cũ.
Sử dụng các công cụ như Firebug hoặc Trình kiểm tra web của Chrome hoặc kiểm tra nhật ký truy cập máy chủ web, xác nhận rằng ứng dụng thực sự đang đưa ra một yêu cầu không liên quan đến /app/%7B%7Bphone.imageUrl%7D%7D (hoặc / app / {{phone .imageUrl}} ).

Tôi đã làm như vậy và nó cho tôi kết quả chính xác:

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

Có một lý do tại sao?

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

Điều này cung cấp cho bạn kết quả mong đợi, vì phone.imageUrlđược đánh giá và thay thế bằng giá trị của nó sau khi góc được tải.

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

Nhưng với điều này, trình duyệt cố gắng tải một hình ảnh có tên {{phone.imageUrl}}, dẫn đến yêu cầu không thành công. Bạn có thể kiểm tra điều này trong bảng điều khiển của trình duyệt của bạn.

Từ tài liệu Angular

Cách viết nó có lỗi:

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

Cách viết đúng:

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

Tại sao? điều này là do khi tải trang, trước khi khởi động theo góc và tạo bộ điều khiển, trình duyệt sẽ cố gắng tải hình ảnh từ http://www.gravatar.com/avatar/{{hash}}đó và nó sẽ không thành công. Sau đó, một khi bắt đầu góc, nó hiểu rằng điều đó {{hash}}phải được thay thế bằng say logo.png, bây giờ thuộc tính src thay đổi thành http://www.gravatar.com/avatar/logo.pngvà hình ảnh tải chính xác. Vấn đề là có 2 yêu cầu đi và một yêu cầu đầu tiên không thành công.

Để giải quyết vấn đề này, chúng ta nên sử dụng ng-srcmột chỉ thị góc và góc sẽ thay thế ng-srcgiá trị thành thuộc tính src chỉ sau khi hệ thống khởi động góc và bộ điều khiển được tải đầy đủ và tại thời điểm đó {{hash}}sẽ được thay thế bằng giá trị phạm vi chính xác.

Điều src="{{phone.imageUrl}}"này là không cần thiết và tạo ra một yêu cầu bổ sung của trình duyệt. Trình duyệt sẽ thực hiện ít nhất 2 GETyêu cầu khi cố gắng tải hình ảnh đó:

1. trước khi biểu thức được đánh giá {{phone.imageUrl}}
2. sau khi biểu thức được đánh giá img/phones/motorola-xoom.0.jpg

Bạn nên luôn sử dụng ng-srcchỉ thị khi xử lý các biểu thức Angular. <img ng-src="{{phone.imageUrl}}">cung cấp cho bạn kết quả mong đợi của một yêu cầu duy nhất.

Một lưu ý nhỏ là , điều tương tự cũng áp dụng để ng-hrefbạn không bị hỏng các liên kết cho đến khi chu kỳ thông báo đầu tiên bắt đầu.

Thực ra nó có ý nghĩa 100% vì HTML được xử lý tuần tự và khi trang HTML này đang được xử lý từng dòng một, vào thời điểm nó đến hình ảnh này, dòng và xử lý hình ảnh, của chúng tôi phone.imageUrl vẫn chưa được xác định.

Và trên thực tế, Angular JS vẫn chưa xử lý đoạn HTML này, cũng như chưa tìm kiếm các trình giữ chỗ này và thay thế các biểu thức này bằng các giá trị. Vì vậy, những gì cuối cùng xảy ra là trình duyệt nhận được dòng này và cố gắng tìm nạp hình ảnh này tại URL này.

Và tất nhiên đây là một URL không có thật, nếu nó vẫn có ria mép và dấu ngoặc nhọn trong đó, và do đó nó cung cấp cho bạn 404, nhưng tất nhiên một khi Angular xử lý điều này, nó sẽ thay thế URL này thành URL thích hợp, và sau đó chúng tôi vẫn nhìn thấy hình ảnh, nhưng thông báo lỗi 404 vẫn còn trong bảng điều khiển của chúng tôi.

Vì vậy, làm thế nào chúng ta có thể giải quyết vấn đề này? Chà, chúng ta không thể xử lý việc này bằng các thủ thuật HTML thông thường. Tuy nhiên, chúng ta có thể xử lý nó bằng Angular. Chúng tôi cần bằng cách nào đó để nói với trình duyệt không cố gắng tìm nạp URL này nhưng đồng thời chỉ tìm nạp nó khi Angular đã sẵn sàng để diễn giải các trình giữ chỗ này.

Chà, một cách làm là đặt thuộc tính Angular vào đây thay vì HTML tiêu chuẩn. Và thuộc tính Angular chỉ là ng-src. Vì vậy, nếu chúng tôi nói rằng bây giờ, hãy quay lại, bạn sẽ thấy rằng không còn lỗi nữa vì hình ảnh chỉ được tìm nạp khi Angular nắm được HTML này và dịch tất cả các biểu thức thành giá trị của chúng.