CODEWITHSUNDEEP
javascriptangular
emvidi
emvidi

Reputation: 1300

Why do the images in my gallery return 403 errors?

I am trying to build a basic gallery and can't get the images to show. If I access the image in another tab directly then the image is displaying correctly in angular. The browser can display the image if accessing the url directly, but is unable with angular. One of the images:

https://lookpic.com/O/i2/593/EHC7oQ7d.jpeg

GalleryComponent: 

import {Component, Input, ElementRef} from "@angular/core";
import {Http, Response} from "@angular/http";
import {Logger} from "angular2-logger/core";
import {ImageModel} from "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 the image mocks:

import {ImageModel} from "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),
];

Upvotes: 0

Views: 116

Answers (1)

Elliot Rodriguez
Elliot Rodriguez

Reputation: 618

HTTP status code 403 indicates the server understood the request, but the resource being requested is blocked.

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

Lookpic.com has more than likely blocked serving up its pics unless requests are made directly via a browser. I imagine its displayed in your Angular app after the tab is opened because the request has completed via browser separately (cache, or the browser requesting the resource has already been authorized to do so and it spans across tabs).

Upvotes: 2

Related Questions