Ionic-image-loader plugin not working

Ionic Framework ionic-v3
#1

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

#2

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
#3

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
#4

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.

#5