使用AngularJS从JSON响应中获取图像URL

Question

我正在尝试使用AngularJS从API获取图像.

我正在使用一个链接来触发$ http函数,并尝试将图像URL从JSON响应解析回HTML,但我想我错过了一些东西,因为响应回来了OK,但是img url没有"得到"到位".

这是我的HTML:

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

我的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;
    });
}

以及JSON响应的示例:

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"

编辑:我做了一个Plunker.您可以在控制台中看到如何正确调用json响应,但仍未显示图像URL.

Answer 1

试试ng-src:

在src属性中使用{{hash}}之类的Angular标记无法正常工作:浏览器将使用文字文本{{hash}}从URL中获取,直到Angular替换{{hash}}中的表达式.ngSrc指令解决了这个问题.

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

另一个问题是#角色和数量.您可以使用括号表示法修复此问题:

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

DEMO