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

Posted 2023-04-12

【中文标题】使用 AngularJS 从 JSON 响应中获取图像 url

【英文标题】：Getting image url from JSON response using AngularJS

【发布时间】：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还是没有显示出来。

【参考方案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 才能使其工作。