Using ng-repeat variable inside src attribute in angularjs?

Question

I have the following:

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

The problem is src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" , that is, even if you look at the received html, I see the correct src ( src="holder.js/300x200" ), it does not display the image. My guess is not how to use angular variables inside attributes.

How can I make it work?

EDIT: it seems that it does not execute holder.js .. here is the source: in the first call I used angular {{hash}} in the second I manually put 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

The documentation explains this quite clearly:

Using Angular markup like {{hash}} in the src attribute does not work correctly: the browser will extract {{hash}} from the URL with literal text until Angular replaces the expression inside {{hash}} . The ngSrc directive solves this problem.

So you should use:

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