javascript - Angular UI 网格 : render image if it exist on a separate server otherwise set a default image

Question

我正在使用 Angular UI Grid，我已经查找了几个堆栈溢出和其他博客，但似乎仍然无法解决问题。我有一个指令，但仍然一事无成。

问题

如果图像存在于单独的服务器上，我想在 UI 网格表上渲染图像，否则将其设置为默认图像。我构建了一个自定义指令，并将该指令注入(inject)到 UI 网格 columnDefs 上。如果出现错误，我的指令会显示默认图像。问题是它没有显示现有服务器上可用的图像。

我已附上我的 Plunkr:http://plnkr.co/edit/ZDHI3cfUWaa7NllGXZeL 。 Plunkr 似乎不起作用，但我的实际代码是。我想分享所有相关代码，以便您在 Plunkr 上拥有所有必要的代码。

PS. 我需要在我的 profile_image_url 上添加前缀 url (www.bucketfeet.com) 才能获取图像。但是，某些 URL 是云前端 URL ( http://d153fwbf2sefnf.cloudfront.net )，这是它们的 CDN。如果它以 http://开头，我不需要前置 http://www.bucketfeet.com 。否则，我会的。

指令

app.directive('imageRender', function () {
    var imageRenderTableView = {
        restrict: 'AE',
        template: '<img width=20px src="http://google.com/favicon.ico" ng-src="www.bucketfeet.com/{{data.profile_image_url}}">',
        link: function(scope, element, attrs) {
          var defaultSrc = attrs.src;
              element.bind('error', function() {
                if(defaultSrc) {
                    element.attr('src', defaultSrc);
                }
                else if(attrs.ngSrc) {
                    element.attr('ngSrc', attrs.ngSrc);
                }
          });
        }
    }
    return imageRenderTableView;
});

在columnDefs中插入指令

{name:'img', width: 50, cellTemplate:"<image-render></image-render>", enableSorting: false}

HTML

<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

我的屏幕 请参阅 Plunkr for JSON 以及我如何在 Angular Service 上检索数据。

Answer 1

我刚刚解决了这个问题。我试图解决的问题是在 Angular Ui-Grid 表中渲染图像(如果它们存在于外部服务器上)。否则，显示默认图像。

您必须使用row.entity.FIELDNAME。就我而言，它是 row.entity.profile_image_url，因为这是我的对象属性上的内容。

指令

app.directive('imageRender', function () {
    var imageRenderTableView = {
        restrict: 'AE',
        template: '<img width=20px src="imgs/art.jpg" ng-src="{{row.entity.profile_image_url}}">',
        link: function(scope, element, attrs) {
          var defaultSrc = attrs.src;
              element.bind('error', function() {
                if(defaultSrc) {
                    element.attr('src', defaultSrc);
                }
                else if(attrs.ngSrc) {
                    element.attr('ngSrc', attrs.ngSrc);
                }
          });
        }
    }
    return imageRenderTableView;
});

您将指令作为 HTML 属性传递到 Angular UI 表的列定义中。见下文:

columnDefs: [
            {name:'img', width: 50, cellTemplate:"<image-render></image-render>", enableSorting: false},
]

HTML

<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

PS-第二部分 我通过使用普通的 javascript concat 方法，通过我的对象数组运行 forEach 方法，向我的 profile_image_url 添加了前缀。

如果有人正在研究在 Angular UI 网格上动态渲染图像，希望这会有所帮助。 Angular 指令是一种可行的方法!!!!