Send too many request to server when need to get image with image

Question

I want to get image from server in Angular 7 with blob. I wrote this service for send request:

  downloadImage(id: number): Observable<any> {
    console.log('in service ')
    return this.http.request('GET', this.appConfig.apiEndpoint + '/Post/DownloadFileForManager/' + id, { responseType: 'arraybuffer' });
  }

My Typescript code:

DownloadImage(id: number): Observable<any> {
this.postService.downloadImage(id).subscribe(data => {
  const arrayBufferView = new Uint8Array(data);
  const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
  const urlCreator = window.URL;
  const imageUrl = urlCreator.createObjectURL(blob);
  this.image = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
})
return this.image;
}

This is my HTML code:

    <ng-container matColumnDef="thumbnail">
            <th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.PHOTO' | translate }} </th>
            <td mat-cell *matCellDef="let element">
                <img class="table-user-pic"
                    [src]="DownloadImage(9)"
                    id="photo"
                    alt="user avatar" width="50">
            </td>
        </ng-container>

now when i send the request it send many request to server .

i have 4 item but it send for firstImage 4 time and for next 8 time .

whats the problem ? how can i solve this problem ???

As you are using a `for` loop, you can do something like this: https://stackoverflow.com/a/40799136/4350275 Calling a method in `src` is really a bad idea. — Prerak Sola, Aug 19 '19 at 08:23

Jens Alenius · Accepted Answer · 2019-08-19T08:21:53.670

0

I think I heard that methods can be called by Angular a lot of times. If you call the downloadImage inside the init method of the component, you could access this.image with a binding instead.

<img class="table-user-pic"
                    [src]="image"
                    id="photo"
                    alt="user avatar" width="50">

(But if you could access the images in the server through a url directly, instead of streams and blob, you could make more use of the existing features in the browsers instead. But this might not be possible in your case)

edited Aug 19 '19 at 08:21

answered Aug 19 '19 at 08:17

Jens Alenius

1,931
2
16
20

it is in table . i have for item – kianoush dortaj Aug 19 '19 at 08:20
aha. But try the binding it might call the server less times. Things happens in loops. And you should avoid calling methods in the components from the html markup. – Jens Alenius Aug 19 '19 at 08:24
i need call the function . and i pass dynamic id – kianoush dortaj Aug 19 '19 at 08:26
I would have preferred that every row data in the table had a property called ex: element.imageUrl when you get i from the server. The server could calculate the url before sending it. Then you could just bind that to the image: [src]="element.umageUrl". But that is not the case her I understand. Instead you could use rxjs to get all the images after you get the 'loop data'. The images could be set to another collection. [src]="images[index]". Its better to do the server calls in the init method. – Jens Alenius Aug 19 '19 at 08:44
i havent access to directly image access . it send me a file and i need to convert that for show image – kianoush dortaj Aug 19 '19 at 08:52
In f12 you could look at the url that gets called when you call postService.downloadImage(id). Have you tryid hardcoding it in the src property? ex: theurl/tothe/imageFile/456 – Jens Alenius Aug 19 '19 at 09:11
i try that . its not work – kianoush dortaj Aug 19 '19 at 09:19
what happens if you copy the full link into the browsers urlfield? Can the browser show it? It might fail of security reasons also. – Jens Alenius Aug 19 '19 at 09:46

Send too many request to server when need to get image with image

1 Answers1