在 ng-repeat 循环中将 json blob 元素绑定到 img src 的其他方法？答案

【问题标题】：Other methods of binding json blob element to img src in ng-repeat loop?在 ng-repeat 循环中将 json blob 元素绑定到 img src 的其他方法？
【发布时间】：2020-12-23 03:57:08
【问题描述】：

我有一个在表格中显示的 json 数组，如下所示：

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

数据库的样子：

{"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..."}]}

这运行得相当好，但我得到了错误：

GET https://localhost/%7B%7Bfield.photo%7D%7D 404（未找到）

来自 {{field.photo}} 在被替换之前被解释。

在 ng-repeat 进行替换之前，我是否可以使用另一种形式的绑定来设置 img src 属性，该属性不会尝试从名为 {{field.photo}} 的文件中检索图像？

谢谢，

【问题讨论】：

标签： angularjs javascript-databinding

【解决方案1】：

在这里找到线索：AngularJS img ng-src binding doesn't work

这没有错误：

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

【讨论】：