I need to pass a token authorization (bearer).

[andrejm7]

Good Morning

this library is too much.

but I have found problems with the links

this.galleryImages.push ( { small: https://xxxx, medium: https://xxxx, big: https://xxxx } );

this is because I need to pass a token authorization (bearer).

how can i solve this problem of mine?

appreciate

[german-e-mas]

Before setting the image galleries, make an explicit get request for each image that you would need, and then create an objectUrl with the response.

For example (didn't tested this, but you can get an idea):

In a service:

getImage(url) { http.get(url, { responseType: 'blob' }); }

In the component:

newGalleryImages = [];
this.service.getImage(url).subscribe(
   (blob) => {
      const imageUrl = URL.createObjectURL(blob);
      newGalleryImages.push({medium: imageUrl, small: imageUrl});
   }
);
this.galleryImages = newGalleryImages;

[andrejm7]

@german-e-mas thanks.

I will test. But will I have to do this for both medium and small images?

[german-e-mas]

If they are different, yes. You can group the requests and then access them with a forkJoin, so you have all the images available at the same time. Just in case, I did that using Angular 5.

[andrejm7]

@german-e-mas

friend I tried to do as you indicated ... but see how it turned out ...

In the requests all are in status 200 and there is no error in the console.

detail .. I took the log of the imageUrl variable and in google chrome opened the image

[andrejm7]

Up?

[andrejm7]

@german-e-mas usted Sabes por qué mis imágenes salen en blanco?

[german-e-mas]

I cannot know without more insight on the code. Have you tried the gallery using public images that don't require an authorization token? If that works, and your request to the image also works, then the issue could lie on how you connect the images you get to the gallery.

[andrejm7]

@german-e-mas yes they work .. the problem is when I try to put access permission with token only.

[andrejm7]

https://stackblitz.com/edit/angular-ivy-amefyb?file=src%2Fapp%2Fapp.component.ts

there is the problem. Why doesn't 4 image appear?

I have a blob service return. And adding to galleryImages I can't see the image.

[german-e-mas]

The solution worked for me on Angular 5. You are using the newest version of Angular and another gallery (kolkov's). You should debug that in the source code, to check how the image is being used.

[andrejm7]

okay .. it’s almost the same thing… i thought you could help me .. thanks.

[resuta566]

https://stackblitz.com/edit/angular-ivy-vh6e2u?file=src%2Fapp%2Fapp.component.ts

test() {
  this.imageService.downloadPDF()
    .subscribe((blob) =>  {
      let base64data;
      var reader = new FileReader();
      reader.readAsDataURL(blob); 
      reader.onloadend = e => {
          this.base64data = reader.result;                
          this.blobImg(this.base64data)
      }              

    });
  }

  blobImg(blob){
      this.galleryImages.push({medium: blob, small: blob});
  }

instead of reader.onloadend = function (){} make it reader.onload = e => {} so that you can pass the base64 image data.

[resuta566]

https://stackblitz.com/edit/angular-ivy-vh6e2u?file=src%2Fapp%2Fapp.component.ts

test() {
  this.imageService.downloadPDF()
    .subscribe((blob) =>  {
      let base64data;
      var reader = new FileReader();
      reader.readAsDataURL(blob); 
      reader.onloadend = e => {
          this.base64data = reader.result;                
          this.blobImg(this.base64data)
      }              

    });
  }

  blobImg(blob){
      this.galleryImages.push({medium: blob, small: blob});
  }

instead of reader.onloadend = function (){} make it reader.onload = e => {} so that you can pass the base64 image data.

this.blobImg(reader.result);
or
this.blobImg(e.target.result);

[resuta566]

create a jwt interceptor so that every API request you'll make, a token would be automatically put on the headers

if (currentUser && currentUser.accessToken) {
            request = request.clone({
                setHeaders: {
                    Accept: 'application/json',
                    Authorization: `Bearer ${currentUser.accessToken}`
               }
         });
}

[andrejm7]

the problem is that it got really slow

[resuta566]

the problem is that it got really slow

could you elaborate "slow"