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的返回值。但是，您的实现不返回任何内容（因此返回undefined）。即使您返回了promise，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;
            });
        }
    };
}

使用ng-src和http get

2 个答案: