diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 3c726bdd2c..537efb6226 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -47,7 +47,11 @@
[context-menu]="getContextMenuActions(row, col)">
{{asIconValue(row, col)}}
-
}})
+
{{data.getValue(row, col)}}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
index e605788a8f..7aafdf8e7e 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
@@ -320,4 +320,29 @@ describe('DataTable', () => {
expect(dataTable.isColumnSorted(
{key: 'column_1'}, 'asc')).toBeTruthy();
expect(dataTable.isColumnSorted( {key: 'column_2'}, 'desc')).toBeFalsy();
});
+
+ it('should replace image source with fallback thumbnail on error', () => {
+ let event = {
+ srcElement: {
+ src: 'missing-image'
+ }
+ };
+
+ dataTable.fallbackThumbnail = '';
+ dataTable.onImageLoadingError(event);
+ expect(event.srcElement.src).toBe(dataTable.fallbackThumbnail);
+ });
+
+ it('should replace image source only when fallback available', () => {
+ const originalSrc = 'missing-image';
+ let event = {
+ srcElement: {
+ src: originalSrc
+ }
+ };
+
+ dataTable.fallbackThumbnail = null;
+ dataTable.onImageLoadingError(event);
+ expect(event.srcElement.src).toBe(originalSrc);
+ });
});
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index f72b200561..f9387b8725 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -63,6 +63,9 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
@Input()
actions: boolean = false;
+ @Input()
+ fallbackThumbnail: string;
+
@Output()
rowClick: EventEmitter = new EventEmitter();
@@ -155,6 +158,13 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
}
}
+ onImageLoadingError(event: Event) {
+ if (event && this.fallbackThumbnail) {
+ let element = event.srcElement;
+ element.src = this.fallbackThumbnail;
+ }
+ }
+
isIconValue(row: DataRow, col: DataColumn) {
if (row && col) {
let value = row.getValue(col.key);
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
index 5964792515..5a1f88de8e 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
@@ -2,6 +2,7 @@
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
+ [fallbackThumbnail]="baseComponentPath + '/img/ft_ic_miscellaneous.svg'"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"