Javascript 角度UI网格：渲染图像（如果它存在于单独的服务器上），否则设置默认图像

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

问题

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

我已附上我的PRUNKR:。Plunkr似乎不起作用，但我的实际代码是。我想分享所有相关的代码，这样你就有了关于Plunkr的所有必要代码

PS.我需要在我的个人资料\u图像\u url上预先添加一个前缀url（www.bucketfeets.com）以获取图像。但是，有些URL是云前端URL（），这是它们的CDN。如果它以http://I开头，则不需要预先编写。否则，我会的

指令

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;
});

应用程序指令（'imageRender'，函数（）{ var imageRenderTableView={ 限制：“AE”， 模板：“”， 链接：函数（范围、元素、属性）{ var defaultSrc=attrs.src； 元素绑定（'error'，function（））{ if（defaultSrc）{ 元素attr（'src'，defaultSrc）； } else if（属性ngSrc）{ element.attr（'ngSrc'，attrs.ngSrc）； } }); } } 返回imageRenderTableView； }); 在columnDefs中插入指令

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

{name:'img'，width:50，cellTemplate:，enableSorting:false}

HTML

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

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

我的屏幕

---

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

我刚刚解决了这个问题。我试图解决的问题是，如果图像存在于外部服务器上，则在Angular Ui网格表中呈现它们。否则，显示默认图像

您必须使用行.entity.FIELDNAME。在我的例子中，它是row.entity.profile\u image\u 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;
});

应用程序指令（'imageRender'，函数（）{ var imageRenderTableView={ 限制：“AE”， 模板：“”， 链接：函数（范围、元素、属性）{ var defaultSrc=attrs.src； 元素绑定（'error'，function（））{ if（defaultSrc）{ 元素attr（'src'，defaultSrc）； } else if（属性ngSrc）{ element.attr（'ngSrc'，attrs.ngSrc）； } }); } } 返回imageRenderTableView； }); 您可以在Angular UI表的列defs中以HTML属性的形式传入指令。见下文：

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

columnDefs：[
{名称：'img'，宽度：50，cellTemplate:，enableSorting:false}，
]

HTML

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

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

PS-第二部分 我通过在对象数组中运行forEach方法，使用纯javascript concat方法将前缀添加到我的profile\u image\u url中

---

如果有人想在Angular UI网格上动态渲染图像，希望这能有所帮助。角度指令是一种方法

所有的图像都有相同的高度吗？我认为在ui网格中渲染不同高度的图像是不可能的？行高不会根据图像大小自动调整。@SaiGiridhar它们的高度都相同。我不认为您可以为不同的图像渲染不同的高度。