Base64 image cannot access in html when set image URL

[damithmalalanayake]

I have a problem accessing the loaded base4 image in the template when I set URL to [lazyload] attribute. Is there any way of doing that?

[tjoskar]

That should be possible.
Do you have an example of a base64 image? Or how you are using it?

[damithmalalanayake]

Base64 is loading perfectly when I set my image URL(which returns base64 string by my backend service) to [lazyload] property. I want to get that loaded base64 string to use in my other service. Is it possible?

[tjoskar]

I guess so, here is an example of using a base 64 image in a component: https://codesandbox.io/s/lazy-load-image-with-base-64-image-gml2t?file=/src/app/app.component.ts

It should just work ;)

[damithmalalanayake]

Nope. This is not what I'm saying. This is really working well. I need to get the base 64 string which returns to tag.
Below example, it returns base64 after executing this URL "https://abcd.com/img/1".
And the image is loaded. I want to access that returned base64 string. Because I want to download the already loaded image without calling backend. I think now you'll get my problem.

<img [lazyLoad]="https://abcd.com/img/1"
defaultImage="assets/img/default_img.gif">

[tjoskar]

So in your case https://abcd.com/img/1 will return a base64 image? In that case I think you need to create your own function to download the image.
Will all your images be downloaded in the same way? In that case, should the following code work:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, IntersectionObserverHooks, Attributes } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

class LazyLoadImageHooks extends IntersectionObserverHooks {
  loadImage({ imagePath }: Attributes) {
    return fetch(imagePath).then(res => res.text());
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule.forRoot(LazyLoadImageHooks)],
  bootstrap: [AppComponent],
})
export class MyAppModule {}

[damithmalalanayake]

Nope. I want to access the base64 in HTML.

[tjoskar]

Do you mean something like this:

@Component({
  selector: 'image',
  template: `<image [lazyLoad]="base64image | async">`,
})
class ImageComponent {
  base64image = fetch('https://abcd.com/img/1').then(r => r.text());
}

Otherwise, I need a small project where you can reproduce the issue.