Merge branch 'master' into refactor

README.md

@@ -110,10 +110,24 @@ The `<img-loader>` component takes many attributes that allows you to customize
 | backgroundSize | string | Sets the `background-size` CSS property of the `<img-loader>` element. This is ignored if `useImg` is set to `true`. | contain |
 | backgroundRepeat | string | Sets the `background-repeat` CSS property of the `<img-loader>` element. This is ignored if `useImg` is set to `true`. | no-repeat |
 | fallbackAsPlaceholder | boolean | Use fallback as a placeholder until the image loads. | false |
+| imgAttributes | ImageAttribute[] | An array of ImageAttribute objects (element, value).  If `useImg == true`, this array will be iterated and each object added as an attribute to the generated `<img>` HTML element. | []] |
 
 
 **Note:** The default values can be changed using the [global configuration](https://github.com/zyramedia/ionic-image-loader#global-configuration) feature.
 
+## Quirks
+In some cases, images won't load on the first time, the culprit seems to be `@ionic-native/file` or `cordova-plugin-file` in its `writeFile` function not calling resolve or reject.
+
+In the meantime we find a solution, here's a quick workaround:
+
+In **./src/index.html** move your `polyfill.js`include above `cordova.js`
+```
+    <!-- The polyfills js is generated during the build process -->
+    <script src="build/polyfills.js"></script>
+
+    <!-- cordova.js required for cordova apps (remove if not needed) -->
+    <script src="cordova.js"></script>
+```
 
 # Global Configuration
 This is optional but it is helpful if you wish to set the global configuration for all of your `<img-loader>` instances. To configure the module, inject the `ImageLoaderConfig` provider in your app's main component.
@@ -324,6 +338,36 @@ class MyComponent {
 
 ```
 
+# Passing HTML / CSS Attributes to a generated image
+
+When using ImageLoader to generate an `<img>` element it may be desirable for the generated element to include additional attributes to provide styling or interaction qualities.  The optional `imgAttributes` value can be used to provide such additional attributes which will be included in the generated `<img>` element in the DOM.
+
+Usage:
+
+1. Include the ImageAttribute model in your .ts
+```typescript
+import { ImageAttribute } from 'ionic-image-loader'
+```
+
+2. Generate an array of ImageAttribute objects
+```typescript
+const imageAttributes: ImageAttribute[] = [];
+imageAttributes.push({
+  element: 'class',
+  value: 'circle-photo'
+})
+```
+
+3. Include the `imgAttributes` element in the `img-loader` element of your HTML
+```html
+ <img-loader [src]="..." useImg [imgAttributes]="imageAttributes"> </img-loader>
+```
+
+4. The generated `<img>` tag will be rendered with the specified attributes
+```html
+  <img src="..." class="circle-photo">
+```
+
 <br><br>
 ## Contribution
 - **Having an issue**? or looking for support? [Open an issue](https://github.com/zyra/ionic-image-loader/issues/new) and we will get you the help you need.

src/components/image-attribute.ts

@@ -0,0 +1,4 @@
+export interface ImageAttribute {
+    element: string;
+    value: string;
+}

src/components/img-loader.ts

@@ -10,6 +10,7 @@ import {
 
 import { ImageLoader } from '../providers/image-loader';
 import { ImageLoaderConfig } from '../providers/image-loader-config';
+import { ImageAttribute } from './image-attribute';
 
 const propMap: any = {
   display: 'display',
@@ -40,12 +41,52 @@ export class ImgLoaderComponent implements OnInit {
   /**
    * Whether to show the fallback image instead of a spinner while the image loads
    */
-  @Input() fallbackAsPlaceholder: boolean = this.config.fallbackAsPlaceholder;
+
+  @Input() fallbackAsPlaceholder: boolean = this._config.fallbackAsPlaceholder;
+
+  /**
+   * Use <img> tag
+   */
+  @Input()
+  set useImg(val: boolean) {
+    this._useImg = val !== false;
+  }
+
+  private _useImg: boolean = this._config.useImg;
+
+
+  /**
+   * Attributes to pass through to img tag if _useImg == true
+   */
+  @Input('imgAttributes') imgAttributes: ImageAttribute[] = [];
+
+  /**
+   * Convenience attribute to disable caching
+   * @param val
+   */
+  @Input()
+  set noCache(val: boolean) {
+    this.cache = val !== false;
+  }
   /**
    * Enable/Disable caching
    * @type {boolean}
    */
   @Input() cache = true;
+  /**
+   * The URL of the image to load.
+   */
+  @Input()
+  set src(imageUrl: string) {
+    this._src = this.processImageUrl(imageUrl);
+    this.updateImage(this._src);
+  };
+
+  get src(): string {
+    return this._src;
+  }
+
+  private _src: string;
   /**
    * Width of the image. This will be ignored if using useImg.
    */
@@ -88,45 +129,13 @@ export class ImgLoaderComponent implements OnInit {
   isLoading = true;
   element: HTMLElement;
 
-  private _src: string;
 
   constructor(
-    private eRef: ElementRef,
-    private renderer: Renderer2,
-    private imageLoader: ImageLoader,
-    private config: ImageLoaderConfig
-  ) {}
-
-  get src(): string {
-    return this._src;
-  }
-
-  /**
-   * The URL of the image to load.
-   */
-  @Input()
-  set src(imageUrl: string) {
-    this._src = this.processImageUrl(imageUrl);
-    this.updateImage(this._src);
-  }
-
-  private _useImg: boolean = this.config.useImg;
-
-  /**
-   * Use <img> tag
-   */
-  @Input()
-  set useImg(val: boolean) {
-    this._useImg = val !== false;
-  }
-
-  /**
-   * Convenience attribute to disable caching
-   * @param val
-   */
-  @Input()
-  set noCache(val: boolean) {
-    this.cache = val !== false;
+    private _element: ElementRef,
+    private _renderer: Renderer,
+    private _imageLoader: ImageLoader,
+    private _config: ImageLoaderConfig
+  ) {
   }
 
   ngOnInit(): void {
@@ -202,6 +211,10 @@ export class ImgLoaderComponent implements OnInit {
       // set it's src
       this.renderer.setAttribute(this.element, 'src', imageUrl);
 
+      // if imgAttributes are defined, add them to our img element
+      this.imgAttributes.forEach((attribute) => {
+        this._renderer.setElementAttribute(this.element, attribute.element, attribute.value);
+      });
       if (this.fallbackUrl && !this.imageLoader.nativeAvailable) {
         this.renderer.listen(this.element, 'error', () =>
           this.renderer.setAttribute(this.element, 'src', this.fallbackUrl)

src/image-loader.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from 'ionic-angular';
 
 import { ImgLoaderComponent } from './components/img-loader';
 import { ImageLoader } from './providers/image-loader';
+import { ImageAttribute } from './components/image-attribute';
 import { ImageLoaderConfig } from './providers/image-loader-config';
 
 @NgModule({

src/index.ts

@@ -1,4 +1,5 @@
 export * from './image-loader.module';
 export * from './components/img-loader';
 export * from './providers/image-loader-config';
+export * from './components/image-attribute';
 export * from './providers/image-loader';