如何使用打字稿获取图像源的值？答案

【问题标题】：How to get the value of image source using typescript?如何使用打字稿获取图像源的值？
【发布时间】：2017-02-08 17:12:49
【问题描述】：

我正在尝试访问 json API 并检索一些数据，例如：标题、类别和图像。

问题是我无法获取图片的来源。

我试过了：

field_image[0].src
field_image[0].getAttribute('src')
field_image[0].attr('src')
等等..

但没有任何工作正常，它给我“找不到函数”或“未定义”。

请帮忙..谢谢..

这是我检索到的一个 json 对象的示例。

Object
    body:"this is a normal text"
    field_category:"myCat"
    field_image:Array[2]
    0:
    "<img typeof="foaf:Image" src="http://rs.ksu.edu.sa/sites/rs.ksu.edu.sa/files/styles/750x407/public/2017-01-19-photo-00000063.jpg?itok=g4DouHqQ" width="750" height="407" alt="" />"
    1:
    "<img typeof="foaf:Image" src="http://rs.ksu.edu.sa/sites/rs.ksu.edu.sa/files/styles/750x407/public/20150817-img_0604.jpg?itok=zNXuoh5t" width="750" height="407" alt="" />"

    length:2
    __proto__:
    Array[0]
    field_issue:"1260"
    field_page_number:"19"
    field_sub_title:"sub"
    field_sub_title1:
    Array[0]
    field_sub_title2:
    Array[0]
    nid:"1269"
    title:"<a href="/issue-1260/1269">this is title</a>"
    __proto__:

【问题讨论】：

field_image 元素似乎是原始文本字符串，而不是 html 元素。如果您使用的是 jquery，则可以使用 jQuery.parseHTML()。

标签： html angularjs json typescript ionic-framework

【解决方案1】：

使用 JQuery：

var url = $(field_image[0]).attr('src');

这将为您解析 HTML 字符串，以便您可以轻松访问属性。

【讨论】：

或者如果你确实想使用 jquery：stackoverflow.com/questions/494143/…
@ridwaili，如果这提供了解决方案，请标记问题。
这只是一个信息，因为如果另一个用户和你有同样的问题，他/她会看到什么有效+1

【解决方案2】：

感谢@Andrew Monks。他向我提供了这个链接https://stackoverflow.com/questions/494143，我在那里找到了解决方案。

这是最终的解决方案：

我声明了一个属性：

element: HTMLImageElement;

然后我创建了这个函数，它接受 html 字符串并返回 img src：

getImgSrc(htmlString){
    var div = document.createElement('div');
    div.innerHTML = htmlString;
    this.element = <HTMLImageElement>div.firstChild;
    return this.element.src;
}

我在这里调用它：

{{this.getImgSrc(item.field_image[0])}}

【讨论】：