Unable to get image url in Mangaeden API Angular 6

问题

I have tried to get the information of the Mangaeden API and I have successfully get a response but when I rendered the image from the url. I got an error 403. It seems there is a problem in requesting in the API.

This is the error in the application.

GET https://cdn.mangaeden.com/mangasimg/63/63df51e43ebfb8983eb39744496b27ef6173b2237535b9c2408ea32d.jpg 403

But when I tried to load the url in the browser and the next time I try it on my application, It works because I think it will cache the image in the browser.

This is the Mangaeden API Information

You can get all manga informations, chapters and mymanga with mangaeden's API. All the informations are sent in JSON format. You can either use HTTP or HTTPS (advised if you need to use the mymanga's API). Important: we require every API user to have a link to our site in their application/site. New: We also support CORS now

About this. Where can I add their link

We require every API user to have a link to our site in their application/site.

HTML

<img src="{{url}}">

Code for component

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
  url: String;

  constructor(private mangaedenService: MangaedenService) {}

  isRedered(id) {
    this.url = null;

    this.mangaedenService.getInfo(id)
      .subscribe(data => {
        this.url = 'https://cdn.mangaeden.com/mangasimg/' + data.image;
      });
  }
}

Code for service

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
}) 
export class MangaedenService {

  constructor(private http: HttpClient) {}

  getInfo(id) {
    return this.http.get('https://www.mangaeden.com/api/manga/' + id)
      .map(this.extract);
  }

  private extract(res: Response | any) {
    return res || {};
  }
}

回答1:

Actually, there is no problem in my code. I got error when rendering images in html which got 403 response. I added this in my html code and It works.

<meta name="referrer" content="no-referrer"/>

You can also check this out

Remove http referer

来源：https://stackoverflow.com/questions/52377765/unable-to-get-image-url-in-mangaeden-api-angular-6

标签

angular