zyra / ionic-image-loader Goto Github PK

Having a spinner show up instead of a small image ends up expanding the page. The spinner should be limited to parent container and not have any minimum width or height values.

When trying to use this with images stored in Firebase Storage I am getting this returned:

{
  "error": {
    "code": 403,
    "message": "Permission denied. Could not perform this operation"
  }
}

Though, if I access the url directly that is indeed what I am getting.
Asking if there is a possibility to use this plugin with images that keep a session?

Hi there,

I am having to use WKWebview for my ionic 2 app, but I have learned that iOS really doesn't play well with the file:// prefix. Do you know of a way around this?

I thought I had found a solution by preloading all the images and storing the returned url (minus the file://) in storage, but for some reason, most of the preloaded images are missing the next time I open the app.

I hope that makes sense. Can you help?

Thank you,

Andy

Hi there,

I was using the 3.0.0 version but I was having this message for some images :
The cache system is not running. Images will be loaded by your browser instead.

I tried to update to 3.1.0 and 3.1.1, but since then, I can see that the 'img-loader' got a "file//......." so I guess it is working, but the image is not displayed (and I see that the natural size of the image is 0x0 px), and " File Transfer Finished with response code 200".

Maybe I am missing something in the configuration ? (Like the File/File Transfer plugins ? I did the instructions but nothing more)

I am using angularjs4, ionic 3.0.1, and latest cordova.
My issue is on iOs simulator and iOs device.

Thanking you in advance

Regards

Hi ,

So I was scratching my head on the following until some debugging made me realize that the file was not stored at all or can't be shown for the below.

<img-loader [useImg]="true" src="http://placehold.it/1200x960"></img-loader>

Curious how to fix that.

Can I Can add a little improvement for custom spinner style and color
https://ionicframework.com/docs/api/components/spinner/Spinner/
I need the color match to my base style
I can try to change on image-loader.ts
<Ion-spinner * ngIf = "&& spinner isLoading"> </ ion-spinner>
to this
<Ion-spinner * ngIf = "&& spinner isLoading" color = "primary" name = "dots"> </ ion-spinner>
still not working

ERROR: Download error code: 3 Live reload ionic 2

I cant get this to work with live reload.

I'm not entirely sure if it's caused by your module but since only images aren't displayed I suppose it has to do something with it:
When running on iOS I get the following error:

handleError — error_handler.js:47EXCEPTION: Error in ./HomePage class HomePage - inline template:22:36 caused by: Attempted to assign to readonly property.
handleError — error_handler.js:49ORIGINAL EXCEPTION: Attempted to assign to readonly property.

On my HomePage Template file on line 22:36 is the code to set the img-loader src like this:

<img-loader [src]="event.cover.source" backgroundSize="cover" [style]="event.cover.style"></img-loader>

In the app it looks like this:

The white boxes should be two full width images

is there any code for linkedin login in ionic 2...plz help

The module currently only handles the initial value that was passed and doesn't handle changes. It should watch any changes in the src attribute and act accordingly.

Nice to have: option to show the spinner while the image is changing

Might be a simple question, but I haven't found this anywhere. Does this work both on Android and iOS? thanks!

I'm trying to implement a fall back image implementation of ionic-image-loader.

I have noticed one small glitch with the loading icon as show in this short screen cap: http://shots.tjyouschak.me/vcHpFt.

More specifically the loading ion is too big and messes up the layout (when it is loading):

Hello, thanks for the awesome plugin. But I have problem of using it in iOS 10.2.

I tested using your example project, but the images cannot be loaded. The spin is there forever.

Below is my 'Ionic Info' output:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

Could you please give some suggestions?

Thanks!

HI! Plugin works incorrect when running on WKWebView, because of this condition
if (window.location.protocol === 'http:' || window.location.protocol === 'https:')
it detects app as running in browser. It would be great to make this condition more correct

If the connection is aborted or disconnected at any point, the plugin saves a corrupted image in the cache and the only way to get rid of it is by clearing app data.

There should be a way to check that the file transfer is complete without any interruptions before saving to cache.

Is there a existing way to check the state of a specific image/uri/url?

Use example:

<img-loader src="https://path.to/my/image.jpg"></img-loader>
<div *ngIf="!imageLoaded('https://path.to/my/image.jpg')"><!-- any action here until image has been loaded --></div>

And in controller:

imageLoaded(image_url) {
   if(this.lazyImageCtrl.state(image_url) === "loaded")
    return true;
  else
   return false;
}

Thanks!

This PR was a good start to add some browser functionality. Running an app in browser (PWA, ionic serve ... etc) should do the following

• load images before setting background CSS property or src attribute (via XHR)
• use fallback image if loading failed

It would be great to have a preload(url) on the imageLoader Service to allow to cache an image before a view with <img-loader src="MYURL"></img-loader> was rendered. This would be good to preload images if you are offline.

Not allowed to load local resource: file:///data/user/0/org.creatorup.youtubebbwapp/cache/image-loader-cache/323897259

I have tested in both Android and IOS. The cardholder name is present before the request is submitted to createToken. In IOS, the strip payments section does not show the customer name. When the payment is submitted using Android, the customer name appears.

I use https://github.com/driftyco/cordova-plugin-wkwebview-engine ,and get warning

ImageLoader Warning: The cache system is not running. Images will be loaded by your browser instead.

according to ionic-team/cordova-plugin-wkwebview-engine@114a9b1

I can upload img by use fileUrl without file://

can anyone give me some info to run this plugin? thanks~!

From #4 ,

even after using useImg , image loads as background.

if height and width are set to 100% image does not show up.

It needs style height=250px and width="250px" . Image is loading correctly.

Now , anyhow it loads in background + it will not show up unless width and height are specified in pixels.

Hello,
I try to find the location of caxhed images?

I get this errors when I build the app.

TypeScript error: node_modules/ionic-image-loader/dist/providers/image-loader.d.ts(13,22): Error TS1005: '=' expected.
TypeScript error: node_modules/ionic-image-loader/dist/providers/image-loader.d.ts(14,22): Error TS1005: '=' expected.

My TypeScript version is 2.0.3

How can I solve this?

It would be great if this package allowed to us to ship the binary with a pre-populated set of cached images (similar to what is done by litehelpers/Cordova-sqlite-ext) this way we could avoid wasting network resources in the device.

Lazy loading images should only load the image if it's within the view port.

Might be a good idea to have lazy loading as a separate module, and add then add lazy loading support here.

When using with virtualScroll I am seeing the same images repeated as I scroll.

For example:

  <ion-list [virtualScroll]="speakers" [approxItemHeight]="'70px'">
    <ion-item *virtualItem="let speaker" (click)="goToSpeakerDetail(speaker)">
      <ion-avatar item-left>
        <img-loader [src]="speaker.headshot" useImg [spinner]="false"></img-loader>
      </ion-avatar>
      <h2>{{ speaker.name }}</h2>
      <p>{{ speaker.title }}</p>
    </ion-item>
  </ion-list>

I got this error when i try run this plugin ...

bundle failed: 'FileReader' is not exported by node_modules/@ionic-native/file/index.js (imported
by node_modules/ionic-image-loader/dist/providers/image-loader.js). For help fixing this
error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

Any idea??

Thanks!

First off, thank you for this package, it is great.

It would be great to have the ability to apply other directives to the component and have them then applied to the <img/> element. For example I am also using this package in my project. In order to apply it to an image element the markup would look something like:

<img-loader [src]="map" useImg [spinner]="false" imageViewer></img-loader>

Can this be used with tags like ion-avatar , <div> etc. ? If not , can this be considered as enhancement ?

First of all great work on this module, I really like it and it saved me a lot of work!

What came in to my mind is a feature to define a maximum size for the cache.
If you want to cache a new image and the cache limit is reached the oldest or marked as less relevant entries would be removed from cache to free space for the new image.

Since I want to cache quite a few images the cache size would increase pretty fast and I don't wont to flood the users phone storage with a bunch of cached images.

I am using pull to refresh functionality to refresh content. When I am updating content I see that all images are blank for very short time and after that they are loading from cache via file:// protocol. Is it possible to remove this effect?

Loading spinner is not hiding after img loaded.

Also, spinner parameters is not working too

Just updated to 3.2.1. Was having issues before this since updating Ionic (worked perfectly before -then started with a constant spinner).
Now get the above error.
I am using a single module so I am importing in app.module.ts and then have IonicImageLoader.forRoot() in the Imports section.
I'm not sure why I get the error message.
Uncaught (in Promise): Error: no provider for ImageLoader!

It's a long error about an injection error but there's no useful information to point to why this is happening.

Have tried deleting node_modules and reinstalling but no help

Thanks

Shane

Im lazy loading my pages in my Ionic application, and I wonder if I should use any different approach to be able to use ionic-image-loader because of that? I have followed the installation and usage documentation as is and I get some unexpected behaviour.

On one of my pages it works perfectly, but on another there is an XHR-request to fetch the image, even though the implementation is the same:
<img-loader *ngIf="imgSrc" [src]="imgSrc" [spinner]="true" useImg></img-loader>

Hi,
Everything worked great before using WkWebView for my ios application https://github.com/apache/cordova-plugin-wkwebview-engine

I'm confused, because on simulator everything is ok too !! and no errors on debugging can be found.
on production and after installing on real devices images do not load.

can you help please ?

I tested this on an iPhone 6, with ios 10.2. Images are only loading after a page has been refreshed. They aren't loading on the first load of the page. The only way I could get them to load was if I closed the page within my app and then opened it again.

Hello guys,

I follow every step of installation for this plugin but when I switch tag to i have this error:
'img-loader' is not a known element:

Anyone can tell me what i did wrong?

Hi there,

When you do not have network, the plt.ready() promise can never be resolved.
Instead, the deviceready of cordova will always be resolved and faster.

If you do not have network, the code will still work very well to cache and get your images cached. But if you still trust plt.ready, the cache can just not working at all..

If you changed the line 80 of image-loader.ts, you will see the cache will be way faster even when you have a good connection

Maybe there is a reason to use plt.ready(), but on my side, I do not have any issue by using document.addEventListener('deviceready', function () {},false)

What do you think ? I can made a PR if needed

Best

Hello! I would want to know how can I manage when the user image is cached and for example his upload a new version of his image. I still saw the cached image of my user contact !
Does any internal logic of 304 response (resource not modified) and download the image when detected that this URL has changed?

Thanks a lot

Consider image loader as

<img-loader [src]="data?.avatar" useImg fallback="assets/img/placeholder.png"></img-loader>

In some cases, this avatar property won't be set or would evaluate to null. Which won't set any src property on the image tag.

For now, the fallback is only loaded when src has some random string or for actual URL which is 404.

When src is null, DOM looks like

<img-loader fallback="assets/img/placeholder.png" useimg="" _nghost-c0="" ng-reflect-fallback-url="assets/img/placeholder.png" ng-reflect-use-img=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><img _ngcontent-c0="" onerror="this.src=&quot;assets/img/placeholder.png&quot;"></img-loader>

If src is not set or evaluates to null, fallback src should be loaded.

Thanks!

Hi,
I'd like to make contribution but I don't know how I can build this project locally and put into my own ionic project to test it.
Could you give me a hint ?
Thanks :)

Thanks for cool plugin.

Is it possible to add custom class or detect when image is downloaded? I would like to display image using 'fade-in' effect.

Dears, is there any possibility to support SVG types ?

I have discovered an issue regarding the clearCache() functionality.
If I call clearCache() and I want to display an image again afterwards on a new view I can only see the loading-spinner.

Hi, thanks for your excellent plugin and your effort.
Are you going to add support to Ionic Native 3.X?

Thanks!!

Add ability to animate images as they are loaded. Developer can specify an animation name in the config or through inputs.

A fade-in animation should be fairly simple to implement. It's worth investigating other animations in the future, such as flip or slide.

Great package, thank you very much.
It would be useful to be able to use the fallback image instead of the spinner while loading.
Apart from being a different option for the UI behavior, using a fallback image of the same size of the loaded image would allow to reserve the space in screen avoiding content jumps, specially in cases where the image is not used in full size but relative to the screen or window size.

Hi,
For some reason images don't load from cache after I updated to version 1.3.0 and always images start to load from internet!
reverted to 1.2.0 and everything works fine again !
I didn't set any custom configuration and I'm not using WKWebView in my project.

Thank you