Sử dụng biến ng-repeat bên trong thuộc tính src trong angularjs?

Question

tôi có như sau:

div.container 
    script(src='/js/bootstrap/holder.js') 
    p.text-info(ng-pluralize, 
       count="devices.length", 
       when="{ '0': 'There are no fragments.', 'one': 'There is 1 fragment.', 'other': 'There are {} fragments.'}") 

    ul.unstyled(ng-repeat='fragment in devices') 
     ul.thumbnails 
      li.span 
       div.thumbnail 
        img(src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}") 
        div.caption 
         h3 {{fragment.name}} 
         p {{fragment.dimension}} 
         ul.unstyled(ng-repeat='component in fragment.components') 
          li {{ component.name }} 

Vấn đề là ở src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}", ví dụ: ngay cả khi nhìn vào html kết quả tôi thấy một src đúng (src="holder.js/300x200") nó không hiển thị hình ảnh. Tôi đoán đây không phải là cách người ta sử dụng các biến số góc bên trong các thuộc tính ..

Làm cách nào để làm cho nó hoạt động?

EDIT: có vẻ như nó không thực hiện holder.js .. đây là nguồn: trong cuộc gọi đầu tiên tôi sử dụng góc {{băm}} trong lần thứ hai tôi tự đặt holder.js/300x200

<div class="thumbnail"> 
    <img src="holder.js/1678x638"> 
    <img src="data:image/png;base64,iVBORw0KG...ElFTkSuQmCC" data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;"> 
</div> 

Answer 1

Các documentation giải thích rõ ràng rằng:

Sử dụng đánh dấu góc như {{hash}} trong thuộc tính src không hoạt động đúng: Trình duyệt sẽ tìm nạp URL có văn bản bằng chữ {{hash}} cho đến khi Góc thay thế biểu thức bên trong {{hash}}. Chỉ thị ngSrc giải quyết vấn đề này.

Vì vậy, bạn phải sử dụng:

<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />