Ionic-image-loader plugin not working

Hello,

i’ve been following some Ionic classes at school lately. We never used .module.ts files with our page, just app.module.ts, so when the command ionic generate page started creating .module.ts files i freaked out, googled and found out i could avoid this using the --no-module parameter.

Well, turns out, those modules are quite useful. I wanted to add an image caching plugin (see https://www.npmjs.com/package/ionic-image-loader ) and this plugin requires specifically this:

Then add IonicImageLoader in your child/shared module(s)

which of course i’m lacking. I have no idea how to even install this plugin now. What can i possibly do?

I’m using Ionic 3.20.0

cli packages: (C:\Users\Fil\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\android_sdk

Misc:

backend : pro

I don’t believe the plugin requires child/shared modules, it just provides that step for those who use them.

With this in mind, I believe all you need is that initial import in app.module.ts

If you want to add lazy loading though, you’ll have to manually create the .module.ts files.

1 Like

The plugin doesn’t seem to work without so i figured it’s a must

imported in app.module.ts:

import { IonicImageLoader } from 'ionic-image-loader';

...

    imports: [
        ...,
        IonicImageLoader.forRoot()

No errors and such. Then i simply use it in whatever page i want, like this:

<img-loader src="http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg"></img-loader>

but it’s not rendering at all, if i inspect i find this newly edited tag:

<img-loader src="http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg" _nghost-c0="" ng-reflect-src="http://marrowproductions.com/W" style="display: block; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-image: url(&quot;http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg&quot;);">
<!--bindings={  "ng-reflect-ng-if": "false"}-->
</img-loader>

It’s working, i’m so noob i didn’t even realize it was working. My markup was bad so the image wasn’t rendering properly. Here’s my new html markup:

<div *ngIf="data.media_type == 'image'" (click)="showFullScreenImage(data.hdurl)" class="stile-immagine">
    <img-loader src="{{ data.url }}" useImg></img-loader>
</div>

<img-loader> without the useImg proprety wouldn’t render at all.