将 ng-src 与 http get 一起使用

Question

我有一个图像处理程序，它从数据库中获取图像字节流并返回一个 http 响应 Content-Type: image/jpeg

在我的 angularjs 应用程序中，我想获取图像并将它们显示在表格中。这是页面代码：

<tr ng-repeat="product in products>
  <td>
     <img ng-src="{{imageMaker(product.id)}}"/>
  </td>
</tr>

控制器代码：

$scope.imageMaker = function (productId) {
    $http.get('/Handlers/ImageRenderer.ashx', {
        params: {
            id: productId
        }
    }).then(function (res) {
        return 'data:image/jpeg;base64,' + res.data;
    });
}

通过运行此代码，Chrome 会崩溃。任何帮助将不胜感激。

Answer 1

您的ng-src 设置为$scope.imageMaker 的返回值。但是，您的实现不会返回任何内容（因此返回未定义）。即使您返回了承诺，ng-src 也希望表达式计算为一个字符串，然后将其设置为 src attr。它不期望一个 promise 对象最终在成功时返回一个字符串。

就我个人而言，我会创建一个自定义指令，当您在链接函数中进行异步调用时，然后将元素的 .src 设置为成功。

.directive('myImg', function($http){
    return{
       scope:{imageId:'@myImg'},
       link: function(s,e,a){

            $http.get('/Handlers/ImageRenderer.ashx', {
                params: {
                    id: s.imageId
                }
            }).then(function (res) {
                e.src('data:image/jpeg;base64,' + res.data);
            });

      }  
    }
})

HTML：

<tr ng-repeat="product in products>
  <td>
     <img my-img="{{product.id}}"/>
  </td>
</tr>

作为旁注，base64 比仅使用真实图像资源的效率低约 30%。

Answer 2

这对我有用（基于 Dylan 的回答）：

.directive('myImg', function($http) {
    return {
        link: function(s, e, a) {
            $http.get('/Handlers/ImageRenderer.ashx', {
                params: {
                    id: s.imageId
                }
            }).then(function(res) {
                e[0].src = 'data:image/jpeg;base64,' + res.data;
            });
        }
    };
}