Sử dụng ng-src vs src

Question

tutorial Điều này cho thấy việc sử dụng các chỉ thị ngSrc thay 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ỉ ng-src với một đồng bằng cũ thuộc tính src.
Sử dụng các công cụ như Firebug, hoặc Thanh tra Chrome trực tuyến, hoặc kiểm tra các bản ghi truy cập webserver, xác nhận rằng ứng dụng được thực sự làm cho một yêu cầu không liên quan để /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?

Answer 1

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

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

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

Nhưng với điều này, trình duyệt sẽ cố gắng tải 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.

Answer 2

Từ docs góc

Cách buggy để viết nó:

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

Cách đúng để viết nó:

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

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

để giải quyết này, chúng ta nên sử dụng ng-src mà là một chỉ thị góc và góc cạnh sẽ thay thế giá trị ng-src vào thuộc tính src chỉ sau bootstrapping góc và điều khiển được nạp đầy đủ, và tại thời điểm đó {{hash}} sẽ đã được thay thế bằng quy mô đúng giá trị.

Answer 3

src="{{phone.imageUrl}}" là không cần thiết và tạo thêm yêu cầu của trình duyệt.Trình duyệt sẽ thực hiện ít nhất 2 GET yêu cầu cố gắng để tải hình ảnh rằng:

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

Bạn nên luôn luôn sử dụng ng-src chỉ thị khi giao dịch với biểu thức Góc. <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.

---

Trên một mặt lưu ý, cùng áp dụng cho ng-href, do đó bạn không nhận được liên kết bị hỏng đến đầu tiên tiêu hóa đá vòng trong.

Answer 4

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

Và trên thực tế, Angular JS chưa xử lý đoạn HTML này, và 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ị. Điều cuối cùng xảy ra là trình duyệt nhận được dòng này và cố 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ó những ria mép và dấu ngoặc nhọn trong nó, và do đó nó mang lại cho bạn một 404, nhưng một khi tất nhiên Angular đảm nhiệm điều này, nó thay thế URL này cho phù hợp một, 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 cách nào chúng tôi có thể xử lý vấn đề này? Vâng, chúng tôi không thể chăm sóc điều này bằng cách sử dụng thủ thuật HTML thông thường. Nhưng, chúng ta có thể chăm sóc nó bằng Angular. Chúng tôi cần bằng cách nào đó để nói cho trình duyệt không cố gắng tìm nạp URL này nhưng đồng thời tìm nạp nó chỉ khi Angular sẵn sàng giải thích các trình giữ chỗ này.

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