Error image problem in lazy image with some custom headers

ng-lazyload-image: 5.0.0 ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0 rxjs : >6 @angular/core : >6 NodeJS : v8.11.1 (/usr/local/bin/node) npm : 6.4.1 OS : macOS … Hi I want to fetch an image with some custom headers. …

home.ts 👇

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  defaultImage = 'assets/imgs/205.png';
  errorImage = 'assets/imgs/310.png';
  myImage = 'http://domain:443/getImage/restaurants/101/picture.jpg';
  offset = 300;
  constructor(public navCtrl: NavController) {
  }
}

…

home.html 👇

<ion-content padding #content>
    <div class="item-image" [defaultImage]="defaultImage" [errorImage]="errorImage" [lazyLoad]="myImage" [offset]="offset"  [scrollObservable]="content.ionScroll"></div>
</ion-content>

…

app.module.ts 👇

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LazyLoadImageModule }  from 'ng-lazyload-image';

async function loadImage({ imagePath }) {
  return await fetch(imagePath, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  }).then(res => res.blob()).then(blob => URL.createObjectURL(blob));
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    LazyLoadImageModule.forRoot({ loadImage }),
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

…

the problem is: when myImage link is broken and the response is 404, the errorImage not appear? but if i disable the fetch of custem headers by changing the LazyLoadImageModule.forRoot({ loadImage }), line to LazyLoadImageModule in app.module.ts it works fine and errorImage appears. is this a bug or i am in wrong way.

the only error in console is: domain:443/getImage/restaurants/1010/picture.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

🙏

[tjoskar]

Hi @pierresh,

If I understand you correctly, you have a service, something like this:

@Injectable({
  providedIn: 'root',
})
export class AuthService {

  constructor(private someDep: MyDep) { }

  getUserToken() {
    return this.someDep.currentUser.token;
  }

}

And you want to call AuthService.getUserToken from loadImage? Did I understand you correctly? That is not possible right now (without a ugly hack), but maybe we can work something out. Can you create a new issue with an example of how you want to use it. Thanks.

[pierresh]

Hello,

Thanks a lot for this great plugin! I have just a question: is there any other way to set the bearer instead of using localstorage? It would be great whether this could be set in component also.

Actually my bearer changes often and its value is managed in a service, that is a bit troublesome to handle this in a module.

Thanks!