angular - Add header to http requests made from within html -

i have protected api endpoints requiring carry authorization token in request header. server ensures token present , valid @ each endpoint. works fine requests coming client code (angular 2).

but requests coming html?

... <img src="api/videos/{{video.id}}/thumbnail"> ... 

how might add authorization header these requests? angular 2 app, there several solutions.

not sure if mean, create service fetch needed data (from http request),

 getdata() : observable<model[]> {      // ...using request      return this.http.get(this.url)             // ...and calling .json() on response return data             .map((res:response) => res.json())             //...errors if             .catch((error:any) => observable.throw(error.json().error || 'server error'));  } 

and model

export class model { constructor(     public id: string,      public imagepath: string     //other properties might need..     ){} 

}

then have bind src property like

 <img class="img-responsive" src="{{model.imagepath}}" style="max-height: 50px;"/> 

note can add headers request that

 let headers = new headers({ 'content-type': 'application/json' });  let options = new requestoptions({ headers: headers }); // create request option  

and

return this.http.get(url, {   headers: headers });