How to add image to ui-grid angular cell

Question

How to add image to angular ui-grid cell.

 var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.gridOptions = { enableSorting: true, columnDefs: [ { field: 'name' }, { field: 'company' }, { field: 'image'} ], data:[ {name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"}, {name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},] }; }]); 

Answer 1

You can use your own cell template to render the image in the cell.

 var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.gridOptions = { enableSorting: true, rowHeight:100, columnDefs: [ { field: 'name' }, { field: 'company' }, { field: 'image', cellTemplate:"<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"} ], data:[ {name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"}, {name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"}, {name:"Name3",company:"Company3",image:"http://cdn.flaticon.com/png/256/70689.png"} ] }; }]); 

Here is a working plnkr.

http://plnkr.co/edit/awQ7B0WmmZhythlCZmgt?p=preview