javascript - 为什么我的图库中的图像返回 403 错误？

Question

我正在尝试建立一个基本的画廊，但无法显示图像。如果我直接在另一个选项卡中访问图像，则图像将以 Angular 正确显示。如果直接访问url，浏览器可以显示图像，但使用 Angular 则无法显示图像。 其中一张图片:

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

画廊组件:

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;
  }

}

图像模型:

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;
  }
}

和图像模拟:

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),
];

Answer 1

HTTP 状态代码 403 表示服务器理解该请求，但正在请求的资源被阻止。

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

除非直接通过浏览器发出请求，否则 Lookpic.com 很可能会阻止提供其图片。我想象它在打开选项卡后显示在您的 Angular 应用程序中，因为请求已通过浏览器单独完成(缓存，或者请求资源的浏览器已被授权这样做并且跨选项卡)。