ng-src 403 no image but correct path

Question

Looked over some relevant posts:

Why am I getting a 404 error with ng-src even though image is appearing?

Conditionally change img src based on model data

but none have the exact same symptoms.

This line of code,

<img ng-src="{{movie.Poster}}" alt="">

where movie is JSON and movie.Poster is a string of a url, seems to be the root of this error:

GET http://ia.media-imdb.com/images/M/MV5BMTk3OTIzODUyOV5BMl5BanBnXkFtZTYwNjgxNjA5._V1_SX300.jpg 403 (Forbidden)

Because the image url is good and complete in the error, the url string property movie.Poster seems to have been passed to ng-src ok/in time. However, many of the seemingly relevant posts emphasize that asynchronicity of JS may be responsible (and in this case movie.Poster does depend on a response from an API).

But if the url is in the error, why does ng-src have a problem requesting the image and displaying anything at all? An above post closest to my issue was able to load the image AND give the console error...

Perhaps the oddest thing is if I navigate to the image url (by copying and pasting that url) into another tab on the browser, then return to my app and click back then forward, the image loads without error!

I tried ng-if="movie.Poster" and... $scope anotherVar = movie.Poster in the controller and then ng-src="{{anotherVar}}"

It seems that the image url itself is not existing. Did you try to load it to your browser? I mean the url? — Alberto I.N.J., Aug 20 '15 at 05:04
Yes. The image url is fine. It loads the image. As explained here: http://stackoverflow.com/questions/22958559/403-when-trying-to-download-a-remote-image the request is denied by the server for security reasons — Eduardo Moreno, Aug 20 '15 at 05:21

score 0 · Answer 1 · answered Aug 20 '15 at 05:07

Your Error is 403. Which indicate that the server can be reached and understood the request, but refuses to take any further action. Status code 403 responses are the result of the web server being configured to deny access, for some reason, to the requested resource by the client .

Your image URL may be correct but you don’t have permission to access that.

http://ia.media-imdb.com/images/M/MV5BMTk3OTIzODUyOV5BMl5BanBnXkFtZTYwNjgxNjA5._V1_SX300.jpg

score 0 · Answer 2 · edited May 23 '17 at 11:51

Doesn't seem to be an angular problem, as much as one with the API,

403 when trying to download a remote image

403 error for loading image from http and not https

Confused about how to handle CORS OPTIONS preflight requests

So, it seems that the headers need to be modified according to the first linked post in this answer...

But I checked that User-Agent is defined in the request to the image and it is...Even tried hard-coding one of the urls in the ng-src and THAT gave same 403...

AND I have colleagues who built the same app with same api without issue!

ng-src 403 no image but correct path

2 Answers2