Other methods of binding json blob element to img src in ng-repeat loop?

Question

I have a json array which I am displaying in a table, like this:

<table><tr ng-repeat="field in databank.Fields">
  <td>{{field.name}}<br />{{field.description}}</td>
  <td><img src={{field.photo}} height=100/></td>
</tr></table>

where databank looks like:

{"Fields":[{"description":"Field1 Description Text","index":1,"name":"Field One",
            "photo":"data:image/png;base64,iVBOR..."},
           {"description":"Field2 Description Text","index":1,"name":"Field Two",
            "photo":"data:image/png;base64,iVEa4..."}]}

this is working reasonably well, but I get the error:

GET https://localhost/%7B%7Bfield.photo%7D%7D 404 (not found)

from {{field.photo}} being interpreted before it is replaced.

Is there another form of binding I can use to set the img src attribute that won't try to retrieve the image from a file named {{field.photo}} before ng-repeat does its substitution?

Thanks,

Answer 1

Found a clue here: AngularJS img ng-src binding doesn't work

This works without the error:

<table><tr ng-repeat="field in databank.Fields">
  <td>{{field.name}}<br />{{field.description}}</td>
  <td><img ng-src={{field.photo}} height=100/></td>
</tr></table>