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

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

我正在使用一个链接来触发$http函数，并试图将JSON响应中的图像url解析回HTML，但我认为我遗漏了一些东西，因为响应返回正常，但img url没有“就位”

这是我的html：

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

还有一个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"

编辑：我做了一个编辑。您可以在控制台中看到如何正确调用json响应，但仍然没有显示图像url。

尝试：

在src属性中使用像{{hash}}这样的角度标记是行不通的 右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式。这个 ngSrc指令解决了这个问题

试试：

在src属性中使用像{{hash}}这样的角度标记是行不通的 右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式。这个 ngSrc指令解决了这个问题

---

嗨！我试过使用ngsrc，但仍然没有使用正确的url填充它。给出JSON示例，路由（album.image.2.#text）正确吗？此外，不管出于什么原因，使用文本，它会停止我所有的角度代码，没有散列，它不会…@Eric Mitjans：我建议您避免在属性名称中使用特殊字符。如果有特殊字符，可以尝试使用括号表示法语法：

album.image[2][“#text”]

。关于路径，看看你的源代码，我想：

images.image[2][“#text”]

响应来自第三方API，所以很遗憾，对于特殊字符我无能为力。。。我创建了一个，也许更容易看到问题：S@EricMitjans：我不知道你从第三方API获取数据。在这种情况下，您会遇到跨域问题。你的第三方支持JSONP吗？@Eric Mitjans：我在同一个域中添加了一个工作演示。在您的情况下，您的第三个必须支持JSONP才能使其工作。您好！我试过使用ngsrc，但仍然没有使用正确的url填充它。给出JSON示例，路由（album.image.2.#text）正确吗？此外，不管出于什么原因，使用文本，它会停止我所有的角度代码，没有散列，它不会…@Eric Mitjans：我建议您避免在属性名称中使用特殊字符。如果有特殊字符，可以尝试使用括号表示法语法：

album.image[2][“#text”]

。关于路径，看看你的源代码，我想：

images.image[2][“#text”]

响应来自第三方API，所以很遗憾，对于特殊字符我无能为力。。。我创建了一个，也许更容易看到问题：S@EricMitjans：我不知道你从第三方API获取数据。在这种情况下，您会遇到跨域问题。你的第三方支持JSONP吗？@Eric Mitjans：我在同一个域中添加了一个工作演示。在您的情况下，您的第三方必须支持JSONP才能使其工作。

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"

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

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