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 in `src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}"`, i.e. even if looking at the resulting html I see a correct src (`src="holder.js/300x200"`) it does not show the image. My guess is this is not how one uses angular variables inside attributes.. How can I make it work? EDIT: it seems it does not execute `holder.js`.. here is the source: in the first call I used angular {{hash}} in the second I manually put `ho…

Accepted Answer

The documentation explains that quite clearly:

Using Angular markup like `{{hash}}` in a `src` attribute doesn't work right: The browser will fetch from the URL with the literal text `{{hash}}` until Angular replaces the expression inside `{{hash}}`. The ngSrc directive solves this problem.

So you must use:

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

Using ng-repeat variable inside src attribute in angularjs?

Solution

Problem