Hình ảnh không tìm thấy trước khi góc đã cập nhật tài liệu

Question

Tôi có một ứng dụng JS góc, có một số hình ảnh, từ một mảng.

Mô hình của tôi trông giống như sau

$scope.images = [ {url: 'someimage.png', desc: 'some desc'}, {url: 'someimage.png', desc: 'some desc'} ] 

Theo quan điểm của tôi, tôi lặp trên này, để hiển thị tất cả hình ảnh.

<ul> 
    <li ng-repeat="image in images" ><img src="{{image.url}}" /></li> 
</ul> 

này hoạt động, nhưng tôi nhận được một số lỗi trang, mà nói

404 Not Found - http://localhost/{{image.url}} 

Các hình ảnh được hiển thị một cách chính xác, vì vậy nó là rõ ràng những hình ảnh đang cố gắng để được nạp trước khi góc đã phân tích tài liệu có được nó đã sẵn sàng. Các tập lệnh của tôi cũng nằm trong phần đầu, vì vậy nó không phải là lỗi đặt hàng javascript.

Answer 1

Vấn đề ở đây là tôi nên sử dụng ng-src và không phải src, để nó sẽ chỉ cố hiển thị hình ảnh khi Angular sẵn sàng.

Vì vậy, mã đúng trông giống như

<ul> 
    <li ng-repeat="image in images" ><img ng-src="{{image.url}}" /></li> 
</ul>