feat(directive): use directive on img element

close #10

projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.directive.spec.ts

@@ -1,13 +1,14 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, Renderer2 } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { NgxIonicImageViewerDirective } from './ngx-ionic-image-viewer.directive';
 
 describe('NgxIonicImageViewerDirective', () => {
   const el: ElementRef = null;
+  const renderer: Renderer2 = null;
   const modalController: ModalController = null;
 
   it('should create an instance', () => {
-    const directive = new NgxIonicImageViewerDirective(el, modalController);
+    const directive = new NgxIonicImageViewerDirective(el, renderer, modalController);
     expect(directive).toBeTruthy();
   });
 });

projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.directive.ts

@@ -1,12 +1,12 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer2, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 
 @Directive({
   selector: '[ionImgViewer]'
 })
-export class NgxIonicImageViewerDirective {
-  constructor(private el: ElementRef, public modalController: ModalController) {}
+export class NgxIonicImageViewerDirective implements OnInit {
+  constructor(private el: ElementRef, private renderer: Renderer2, public modalController: ModalController) {}
 
   @Input() scheme?: string;
   @Input() slideOptions?: object;
@@ -19,6 +19,12 @@ export class NgxIonicImageViewerDirective {
     this.viewImage(this.src, this.srcHighRes, this.title, this.text, this.scheme, this.slideOptions);
   }
 
+  ngOnInit() {
+    if (!this.el.nativeElement.hasAttribute('src')) {
+      this.renderer.setAttribute(this.el.nativeElement, 'src', this.src);
+    }
+  }
+
   async viewImage(
     src: string,
     srcHighRes: string = '',