CODEWITHSUNDEEP
angularimage
mamenejr
mamenejr

Reputation: 325

Failed to load resource: the server responded with a status of 403 - Image

I discover angular and I have some problems when loading images. I retrieve links to images from an API and assign the recovered link to the source of my image. However, some images do not load and I get the following error in the Chrome console:

Failed to load resource: the server responded with a status of 403

I also tried it with Chrome and Edge but the problem persists. In the Chrome console, I can see the links that failed to be loaded. When I click on the link, I still access the image. What is amazing is that once I click on the link and reload the page, the image loads onto my page.

Here's some code:

Component that retrieve data:

@Component({
  selector: 'app-idole-list',
  templateUrl: './idole-list.component.html',
  styleUrls: ['./idole-list.component.css']
})
export class IdoleListComponent implements OnInit {
  idols;
  constructor(
    private myService: MyService
  ) {
    this.idols = myService.getData();
   }

  ngOnInit() {
  }

}

HTML of my Component:

<div class="clr-row">
    <div class="clr-col-4" *ngFor="let idol of idols | async">
        <div class="card" >
            <div class="card-block">
                <h3 class="card-title">{{ idol.name }}</h3>
            </div>
            <div class="card-img">
                <img [src]="idol.imgUrl">
            </div>
        </div>
    </div>
</div>

EDIT:

In Firefox, here is the response from a GET request of one of the images :

Access Denied
You don't have permission to access "http://ankama.akamaized.net/www/static.ankama.com/dofus/www/game/items/200/178102.png" on this server.

Reference #18.47327b68.1563645916.138751e4

I don't know why I get a forbidden access on the half on the images

Upvotes: 3

Views: 15490

Answers (3)

yanky_cranky
yanky_cranky

Reputation: 1363

Here is the issue attached below, so this resource can be available only if request is coming from "https://www.dofus.com" when its a cross-origin, i.e your code is running on different host and asking a resource from "https://s.ankama.com"

else, it will browse perfectly fine, since origin will not change.

enter image description here

Now, to fix this either set 

access-control-allow-origin : *

or to your domain on the server, then it will work; note you cannot set multiple domains comma separated to allow access.

If this server is not in your control, then as per the browser behavior it will not allow to load that resource if its a cross-origin request, read cors

Upvotes: 4

ahmeticat
ahmeticat

Reputation: 1939

You are getting status of 403,so this status occurs due to authorization.

So,try to get this image with some header or whatever needed

Upvotes: 1

developing2020
developing2020

Reputation: 322

Try <img src="{{idol.imgUrl}}">

In my experience, this way of doing it works more often for some reason.

Upvotes: 0

Related Questions