ImageInsight Image Error Notification (#8086)

* image visualization printout (needs localization)

* Add error image and log error

* "added alert error for invalid image"

* removed unnecessary spaces

* removed spaces on 61 and 66

* Added image and used notification service

* Removed unused import

* Changed wording for error

src/sql/workbench/parts/charts/browser/imageInsight.ts

@@ -4,10 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IInsight, IInsightData } from './interfaces';
-
+import { INotificationService } from 'vs/platform/notification/common/notification';
 import { $ } from 'vs/base/browser/dom';
 import { mixin } from 'vs/base/common/objects';
 import { IInsightOptions, InsightType } from 'sql/workbench/parts/charts/common/interfaces';
+import * as nls from 'vs/nls';
 
 export interface IConfig extends IInsightOptions {
 	encoding?: string;
@@ -29,7 +30,7 @@ export class ImageInsight implements IInsight {
 
 	private imageEle: HTMLImageElement;
 
-	constructor(container: HTMLElement, options: IConfig) {
+	constructor(container: HTMLElement, options: IConfig, @INotificationService private _notificationService: INotificationService) {
 		this._options = mixin(options, defaultConfig, false);
 		this.imageEle = $('img');
 		container.appendChild(this.imageEle);
@@ -52,11 +53,16 @@ export class ImageInsight implements IInsight {
 	}
 
 	set data(data: IInsightData) {
+		const that = this;
 		if (data.rows && data.rows.length > 0 && data.rows[0].length > 0) {
 			let img = data.rows[0][0];
 			if (this._options.encoding === 'hex') {
 				img = ImageInsight._hexToBase64(img);
 			}
+			this.imageEle.onerror = function () {
+				this.src = require.toUrl(`./media/images/invalidImage.png`);
+				that._notificationService.error(nls.localize('invalidImage', "Table does not contain a valid image"));
+			};
 			this.imageEle.src = `data:image/${this._options.imageFormat};base64,${img}`;
 		}
 	}