Question

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

我正在使用一个链接来触发$ http函数，并尝试将图像URL从JSON响应解析回HTML，但我想我错过了一些东西，因为响应回来了，但是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标记并不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

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

另一个问题是#字符和数字。您可以使用括号表示法修复此问题：

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

DEMO

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

1 个答案: