AngularJS Get fails to retrieve image url with "302 found"

Question

I'm trying to add an image to my AngularJS app with a url received from a random cat image site. this is my controller.js:

'use strict';

 /* Controllers */
 var catPath = "http://thecatapi.com/api/images/get?format=src&results_per_page=1";
 var Controllers = angular.module('museum1.controllers', []);
 Controllers.controller('oneCatController', ['$scope', '$http',
 function($scope, $http) {
    $http.get(catPath).success(function(data) {
        $scope.imgurl = data;
        console.log($scope.imgurl);
    });
 }]);

and this is the partial that should show the image:

<div>

    <img ng-src="{{imgurl}}">
</div>

the controller is called by the app.js, not shown here.

Using fireBug I get a message with the path i requested and "302 Found 770ms". The same path works from the browser address line, and the angular code worked for me using this example.

Answer 1

A few things..

1. Usually I don't use double curly brackets for ng properties. You may consider removing them.
2. The case sensitivity of your controllers variable is different than that of the variable you access in ng-src. This may cause the ng-src value to not show up.

In the controller:

$scope.imgurl = data;

In the HTML:

<img ng-src="{{imageUrl}}">

Change your HTML to:

<img ng-src="{{imageurl}}">

Essentially, putting the 'U' into lowercase.

And finally, I'm not sure how the ng-src works off the top of my head. But, if it uses JavaScript to load the image--and your domain is not the same domain as the image you are loading, then you may be running into cross domain security issues. But, if ng-src does not use JavaScript to load the image somehow, then you should be fine.