使用 angularjs 动态加载图像

Question

我目前正在开发一个使用 angularJs 的 Ionic 应用程序。我还有一个 Jhipster 在 Web 上制作的 REST Web 服务提供商应用程序运行，它向我的应用程序提供数据。

我目前所做的是，通过 jhipster 的 REST API 调用获取完整的（文本 + 图像数据）JSON。文本数据包括人的id、姓名、地址等信息，图像数据是人的照片。

我想做的是在加载时加载图像，即触发 API 对文本数据的调用，然后在页面上呈现文本数据后分别调用每个图像。

我已经准备好单独的 API 文本数据和另一个 API 根据 id 获取单个图像。

不，这是我的问题，我想要一种方法来触发 < img > 标记中的 API 调用。呈现列表后，与 < img > 关联的 directive/service 将获取用户的 people.id 并将其传递给函数，该函数随后将触发我的 API 调用获取图像，带来响应（图像）并将其绑定到 < img >.

<div class="list">
    <div class="item item-thumbnail-left item-text-wrap item-avatar"
         ng-repeat="item in peoples ">

        <img ng-src="data:image/png;base64,{{item.image}}" alt="{{item.name}} Photo" err-src="img/people.png">

        <h2> {{item.firstName}} </h2>
        <span>   {{item.emailId}} </span>

    </div>
</div>

Answer 1

您可以稍微改变一下以使其正常工作。例如，不要像现在那样绑定数据，只需将其更改为一个 return 一次性完成整个事情的函数。

类似于：<img ng-src="{{getMyData(yourID)}}" >

然后在 getMyData 函数中执行所需的操作，启动数据库调用并 return 执行所需的操作。您也可以应用 ng-cloak，因为调用需要一段时间才能执行并取回数据。

$scope.getMyData = function(id)
        {
            //api work
            //create return string
            return 'the whole thing'
        }

使用 angularjs 动态加载图像

Load image dynamically with angularjs

angularjs

jhipster

ionic-framework