Question

我正在尝试构建一个基本的图库，但无法显示图像。如果我直接在另一个标签中访问图像，则图像以角度正确显示。如果直接访问URL，浏览器可以显示图像，但无法使用角度。其中一张图片：

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

和图像模拟：

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应用程序中显示它，因为请求已经通过浏览器单独完成（缓存，或者请求资源的浏览器已经被授权这样做，并且跨越选项卡）。

为什么我的图库中的图片会返回403错误？

1 个答案: