Angular UI 网格：如果图像存在于单独的服务器上则渲染图像，否则设置默认图像

Question

我正在使用 Angular UI Grid，我已经查阅了几个 stack overflow 和其他博客，但似乎仍然无法解决问题。我有一个指令，但仍然一无所获。

问题

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

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

PS. 我需要在 profile_image_url 上添加前缀 url (www.bucketfeet.com) 才能获取图像.但是，有些 URL 是云前端 URL（http://d153fwbf2sefnf.cloudfront.net) which is their CDN. If it starts with http:// I don’t need to prepend 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 了解 JSON 以及我如何在 Angular 服务上检索数据。

Answer 1

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

您必须使用 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;
});

您在 Angular UI Table 的列定义中将指令作为 HTML 属性传入。见下文：

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 指令是一个可行的方法!!!!

Angular UI 网格：如果图像存在于单独的服务器上则渲染图像，否则设置默认图像

Angular UI Grid : render image if it exist on a separate server otherwise set a default image

javascript

angularjs

angularjs-directive

angular-directive

angular-ui-grid