use base 64 token for loading images in Lightbox

[farooq-asarstrategies]

for (let i = 1; i <= 4; i++) {
const src = 'demo/img/image' + i + '.jpg';
const caption = 'Image ' + i + ' caption here';
const thumb = 'demo/img/image' + i + '-thumb.jpg';
const album = {
src: src,
caption: caption,
thumb: thumb
};

this method is appending index at the end of file name. how can i use base 64 src for images?

[themyth92]

Hi, it does not support base64 image right now. Only image with url.
Edit: Sorry, it does support it.

[farooq-asarstrategies]

@themyth92 is there any way i can covert base64 image to Url ?

[themyth92]

Hi, can you just define base64 data in your src. For example:

const album = {
   src: 'data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/Aw ...',
   caption: 'blabla'
}

[farooq-asarstrategies]

I am doing same. but it wont load images. even light box doesn't open. no error in console.

heres the code

for each gallery in result
result[gallery]['Attachments'][attachment]['src'] = "data:" + filemime + ";base64," + file;

heres my open method. lightbox wont open. dont know whats happening
open(albumb , image): void {
// open lightbox
this._lightbox.open(this.galleries[albumb]['Attachments'], image);
console.log(this.galleries[albumb]);
console.log(image);
}

[farooq-asarstrategies]

for (let i = 1; i <= 4; i++) {

const src = 'demo/img/image' + i + '.jpg';
const caption = 'Image ' + i + ' caption here';
const thumb = 'demo/img/image' + i + '-thumb.jpg';

}

how do i assign index to the base 64 images

[themyth92]

Hi, what is the value in your this.galleries[albumb]['Attachments'] ?
It must have this format

this.galleries[albumb]['Attachments'] = [
  {
    src: 'data:image/gif;base64...'
  },
  {
    src: 'data:image/gif;base64...'
  }
]

It seems like you have another properties, e.g attachment

[farooq-asarstrategies]

@themyth92 i have other attributes also in
this.galleries[albumb]['Attachments'] but src is there.

[themyth92]

I think you should change your implementations to

for each gallery in result:
   result[gallery]['Attachments']['src'] = "data:" + filemime + ";base64," + file; // notice the removal of `attachment` attributes

// ...
this._lightbox.open(this.galleries[albumb]['Attachments'], image);

[farooq-asarstrategies]

@themyth92 i have similar implementation..each gallery has many attachments and for each attachment i do this
result[gallery]['Attachments']["this is the attachment index"]['src'] = "data:" + filemime + ";base64," + file;

[themyth92]

Hmm, that's seem correct. Also on the second parameter is the index of the image right ?
Like

this._lightbox.open(this.galleries[albumb]['Attachments'], image);
// image is the index inside `this.galleries[albumb]['Attachments']` ?

[farooq-asarstrategies]

Yes. its the index of image.

[themyth92]

You mind post the result of this.galleries[albumb]['Attachments'] here ? Can just mock the base64 data

[farooq-asarstrategies]

@themyth92 https://ibb.co/eWyENa

see this image for this object this.galleries[albumb]['Attachments']

[farooq-asarstrategies]

@themyth92 check this url now https://ibb.co/eWyENa

[themyth92]

Hi, can you just change src to point to some specific url and dont use base64 encode. I dont see any problems with your screenshot.
Try whether lighbox2 is shown up or not.

[themyth92]

And also can you check on your html do you attach the click event. E.g

<thumb (click)="open(i)></thumb>

[farooq-asarstrategies]

https://ibb.co/gm2zNa see html @themyth92

[themyth92]

If you change your src image some google images with url, is it work or not ?

[farooq-asarstrategies]

image modal not working for google images also. no error in console.

[farooq-asarstrategies]

@themyth92 it shows thumbnails for this. but no modal for images

[themyth92]

Hi, i am not sure what is going on on your side so I create a new branch from my webpack demo. Can you see what's the difference here compare to your work.

The file you need to check is at demo/app.component.ts (notice the variables this.galleries)

You can clone on your end and run npm install -> npm start to start on your localhost. It is using one image with base64 encoded.

Tks.

[themyth92]

Closed, feel free to open if you have any problems !