current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to fetch an image from an API using AngularJS.

I'm using a link to trigger the $http function, and trying to parse the image url from the JSON response back into the HTML, but I think I'm missing something, as the response comes back OK, but the img url doesn't get "in place".

Here's my html:

<a ng-click="getImages()">Image: <img src="{{album.image.2.#text}}" /></a>

My JS:

$scope.getImages = function () {
  $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=%%%&artist=vnv+nation&album=empires&format=json').
    success(function(data4) {
        $scope.images = data4;
    });
}

And a example of JSON response:

album: {name:Empires, artist:VNV Nation, id:2025273, mbid:0c3ccb9f-e6c4-419d-934e-02e3be8a08c9,…}
artist: "VNV Nation"
id: "2025273"
image: [{#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small},…]
   0: {#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small}
   1: {#text:http://userserve-ak.last.fm/serve/64s/93873429.png, size:medium}
   2: {#text:http://userserve-ak.last.fm/serve/174s/93873429.png, size:large}
       #text: "http://userserve-ak.last.fm/serve/174s/93873429.png"
       size: "large"

EDIT: I made a Plunker. You can see in the console how the json response is called correctly, but the image url is still not being shown.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

Try ng-src:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

<img ng-src="{{album.image.2.#text}}" />

Another problem is the # character and number. You could fix this with bracket notation:

<img ng-src="{{album.image[2]['#text']}}" />

DEMO

share|improve this answer
    
Hi! I've tried with ng-src, and it is still not getting populated with the proper url. Given the JSON example, is the route (album.image.2.#text) correct? Also, for whatever reason, with #text it brakes all my Angular code, without hash, it doesn't... –  Eric Mitjans Mar 16 at 13:51
1  
@Eric Mitjans: I recommend that you avoid special characters in your property names. Ifi there is a special character, you could try bracket notation syntax: album.image[2]["#text"]. And about the path, looking at your source code, I guess: images.image[2]["#text"] –  Khanh TO Mar 16 at 13:56
    
The response comes from a 3rd party API, so unfortunately there's not much I can do about the special characters... I've created a Plunker, maybe is easier to see the problem :S –  Eric Mitjans Mar 16 at 13:59
    
@Eric Mitjans: I did not know that you get the data from a 3rd party API. In this case, you run into cross-domain problem. Does your 3rd party support JSONP? –  Khanh TO Mar 16 at 14:03
1  
@Eric Mitjans: I added a working demo with same domain. In your case, your 3rd must support JSONP to make it work. –  Khanh TO Mar 16 at 14:15
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.