javascript - Why do the images in my gallery return 403 errors? -

i trying build basic gallery , can't images show. if access image in tab directly image displaying correctly in angular. browser can display image if accessing url directly, unable angular. 1 of images:

https://lookpic.com/o/i2/593/ehc7oq7d.jpeg 

gallerycomponent:

import {component, input, elementref} "@angular/core"; import {http, response} "@angular/http"; import {logger} "angular2-logger/core"; import {imagemodel} "app/core/index";  @component({   selector: "[app-gallery]",   template: ` <div class="gallery--main">   <img  [src]="src">   <div *ngif="images.length > 1">     <span class="prev" (click)="prev()"><i class="fa fa-chevron-left"></i></span>     <span class="next" (click)="next()"><i class="fa fa-chevron-right"></i></span>   </div>   <ul class="gallery--thumbs">     <li *ngfor="let image of images">       <img src="{{image.src1 || ''}}" (click)="setfocus(image)">     </li>   </ul> </div> ` }) export class gallerycomponent {   private _el: htmlelement;   @input() images: array<imagemodel>;   src: string;   _hasfocus: number;    constructor(private _l: logger, private el: elementref, private http: http) {     this._el = el.nativeelement;     this.src = "data:image/gif;base64,r0lgodlhaqabaaaaach5baekaaealaaaaaabaaeaaaictaeaow==";   }   ngafterviewinit() {     console.log(this.images);     this.src = this.images[0].src1;     this._hasfocus = 0;   }   setfocus(image: imagemodel): void {     this.src = image.src1;   }   prev(): void {     let previous = (this._hasfocus === 0) ? this.images.length - 1 : this._hasfocus - 1;     console.log(previous);     this.src = this.images[previous].src1;     this._hasfocus = previous;   }   next(): void {     let next = (this._hasfocus === this.images.length + 1) ? 0 : this._hasfocus + 1;     this.src = this.images[this._hasfocus - 1].src1;     this._hasfocus = next;   }  } 

imagemodel:

export class imagemodel {   position: number;   src1: string;   src2: string;   src3: string;    constructor(position: number, url1: string, url2?: string, url3?: string) {     this.position = position;     this.src1 = url1;     this.src2 = url2;     this.src3 = url3;   } } 

and image mocks:

import {imagemodel} "app/core/index";  export const mock_images: array<imagemodel> = [   new imagemodel(0, "https://lookpic.com/o/i2/593/ehc7oq7d.jpeg", undefined, undefined),   new imagemodel(1, "https://lookpic.com/o/i2/1952/mhbytcyy.jpeg", undefined, undefined),   new imagemodel(2, "https://lookpic.com/o/i2/1072/zi56gxq6.jpeg", undefined, undefined),   new imagemodel(3, "https://lookpic.com/o/i2/1072/pvulqlkp.jpeg", undefined, undefined), ]; 

http status code 403 indicates server understood request, resource being requested blocked.

https://en.wikipedia.org/wiki/http_403

lookpic.com has more blocked serving pics unless requests made directly via browser. imagine displayed in angular app after tab opened because request has completed via browser separately (cache, or browser requesting resource has been authorized , spans across tabs).