diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index b93eb22b43..7cc4b304a9 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -99,7 +99,7 @@
+ (error)="onImageLoadingError($event, row.obj.entry.content.mimeType)">
{{ iconAltTextKey(data.getValue(row, col)) | translate }}
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index e3c32619ac..2163e93b68 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -739,6 +739,17 @@ describe('DataTable', () => {
expect(event.target.src).toBe(originalSrc);
});
+ it('should replace image source with icon if fallback is not available and mimeType is provided', () => {
+ let event =
{
+ target: {
+ src: 'missing-image'
+ }
+ };
+
+ dataTable.onImageLoadingError(event, 'image/png');
+ expect(event.target.src).toBe('./assets/images/ft_ic_raster_image.svg');
+ });
+
it('should not get cell tooltip when row is not provided', () => {
const col = { key: 'name', type: 'text' };
expect(dataTable.getCellTooltip(null, col)).toBeNull();
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 77b82304b0..c0c297ab17 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -29,6 +29,7 @@ import { DataRowEvent } from '../../data/data-row-event.model';
import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
+import { ThumbnailService } from '../../../services';
import { ObjectDataRow } from '../../data/object-datarow.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@@ -161,7 +162,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
private singleClickStreamSub: Subscription;
private multiClickStreamSub: Subscription;
- constructor(private elementRef: ElementRef, differs: IterableDiffers) {
+ constructor(
+ private elementRef: ElementRef,
+ differs: IterableDiffers,
+ private thumbnailService?: ThumbnailService
+ ) {
if (differs) {
this.differ = differs.find([]).create(null);
}
@@ -421,7 +426,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
this.emitRowSelectionEvent(domEventName, row);
}
- onImageLoadingError(event: Event) {
+ onImageLoadingError(event: Event, mimeType?: string) {
+ if (mimeType && !this.fallbackThumbnail) {
+ this.fallbackThumbnail = this.thumbnailService.getMimeTypeIcon(mimeType);
+ }
+
if (event && this.fallbackThumbnail) {
let element = event.target;
element.src = this.fallbackThumbnail;