import { LogCategories , Constants } from './../../shared/models/constants' ; import { Guid } from './../../shared/Utilities/Guid' ; import { LogService } from './../../shared/services/log.service' ; import { CacheService } from './../../shared/services/cache.service' ; import { Input , ElementRef , Directive , OnChanges } from '@angular/core' ; import { Headers } from '@angular/http' ; @ Directive ( { selector : '[load-image]' , } ) export class LoadImageDirective implements OnChanges { @ Input ( 'load-image' ) imageUrl : string ; constructor ( private _cacheService , private _logService , private _elementRef ) { } ngOnChanges ( ) { if ( this . imageUrl ) { LoadImageDirective . injectImageToElement ( this . imageUrl , this . _elementRef . nativeElement , this . _cacheService , this . _logService ) ; } } public static injectImageToElement ( imageUrl , element , cacheService , logService ) { const cdnUrl = Constants . cdnNgMin ; if ( ! imageUrl . toLowerCase ( ) . endsWith ( '.svg' ) ) { element . innerHTML = `<img src="${ cdnUrl }${ imageUrl }?cacheBreak=${ window . appsvc . cacheBreakQuery }" />` ; } else { const headers = new Headers ( ) ; headers . append ( 'Accept' , 'image/webp,image/apng,image/*,*/*;q=0.8' ) ; headers . append ( 'x-ms-client-request-id' , Guid . newGuid ( ) ) ; cacheService . get ( `${ cdnUrl }${ imageUrl }?cacheBreak=${ window . appsvc . cacheBreakQuery }` , false , headers ) . subscribe ( image => { element . innerHTML = image . text ( ) ; } , e => { logService . error ( LogCategories . svgLoader , '/download-image' , e ) ; } ) ; } } }