使用 AngularJS 从 JSON 响应中获取图像 url答案

【问题标题】：Getting image url from JSON response using AngularJS使用 AngularJS 从 JSON 响应中获取图像 url
【发布时间】：2014-03-16 13:18:08
【问题描述】：

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

我正在使用链接来触发 $http 函数，并尝试将 JSON 响应中的图像 url 解析回 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还是没有显示出来。

【问题讨论】：

标签： javascript json angularjs

【解决方案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

【讨论】：

嗨！我已经尝试过使用 ng-src，但仍然没有填充正确的 url。给定 JSON 示例，路由 (album.image.2.#text) 是否正确？此外，无论出于何种原因，使用#text 它会阻止我所有的 Angular 代码，没有哈希，它不会...
@Eric Mitjans：我建议您避免在属性名称中使用特殊字符。如果有特殊字符，您可以尝试括号符号语法：album.image[2]["#text"]。关于路径，看你的源代码，我猜：images.image[2]["#text"]
响应来自第 3 方 API，所以不幸的是我对特殊字符无能为力...我创建了一个 Plunker，也许更容易看到问题：S
@Eric Mitjans：我不知道您从第 3 方 API 获取数据。在这种情况下，您会遇到跨域问题。您的第 3 方是否支持 JSONP？
@Eric Mitjans：我添加了一个具有相同域的工作演示。在您的情况下，您的 3rd 必须支持 JSONP 才能使其工作。