Javascript 为什么我的图库中的图像返回403个错误？

我试图建立一个基本的画廊，但无法得到的图像显示。如果我直接访问另一个选项卡中的图像，则图像以角度正确显示。如果直接访问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;
  }

}

图像模拟：

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

从“app/core/index”导入{ImageModel}；
导出常量模拟图像：数组=[
新的图像模型（0，“https://lookpic.com/O/i2/593/EHC7oQ7d.jpeg“，未定义，未定义），
新的图像模型（1，“https://lookpic.com/O/i2/1952/MhbYTCYy.jpeg“，未定义，未定义），
新的图像模型（2，“https://lookpic.com/O/i2/1072/zi56gXq6.jpeg“，未定义，未定义），
新的图像模型（3，“https://lookpic.com/O/i2/1072/pvulQlkp.jpeg“，未定义，未定义），
];

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

---

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

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

---

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

我在浏览器中运行Angular 2。但您是间接地（通过Angular）发出图像请求，而不是直接使用浏览器。这类间接请求被阻止以阻止站点提供不属于它们的资源并最终消耗带宽的情况并不少见。好的，我明白了，拒绝为图像提供服务的不是我的代码，而是另一端的服务器。我在浏览器中运行angular 2。但您是间接（通过angular）请求图像，而不是直接使用浏览器。这类间接请求被阻止以阻止站点提供不属于它们的资源并最终消耗带宽的情况并不少见。好的，我现在明白了，不是我的代码，而是另一端的服务器拒绝提供图像。

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