Verwenden von ng-repeat-Variable im src-Attribut in angularjs?

Question

Ich habe folgendes:

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 }} 

Das Problem ist in src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}", das heißt, auch wenn auf der resultierende HTML-Suche ich eine korrekte src sehen (src="holder.js/300x200") es das Bild nicht zeigen. Meine Vermutung ist, dass man nicht Winkelvariablen innerhalb von Attributen verwendet.

Wie kann ich es funktionieren lassen?

EDIT: es scheint nicht ausgeführt holder.js .. hier ist die Quelle: in dem ersten Aufruf I Winkel verwendet {{hash}} in der zweiten manuell ich holder.js/300x200 setzen

<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

Die documentation ganz klar erklärt, dass:

mit Angular Markup wie {{hash}} in einem src Attribute nicht richtig funktioniert: der Browser von der URL mit dem wörtlichen Text holen wird {{hash}} bis Angular den Ausdruck innerhalb {{hash}} ersetzt. Die ngSrc-Anweisung löst dieses Problem.

Sie müssen also verwenden:

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