如何使用返回的GET超链接作为HTML中的img src链接

Question

当前我发送XMLHttpRequest以检索JSON响应。我想将链接列为“正常”，但我不确定如何引用它们以将它们放入我的HTML img元素列表中。这里是JSON响应：

{ 
 
    metadata: { 
 
    code: 200 
 
    message: "OK" 
 
    version: "v2.0" 
 
    } - 
 
    data: { 
 
    _links: { 
 
     self: { 
 
     href: "//z4photorankapi-a.akamaihd.net/customers/215757/media/recent/?count=20" 
 
     } - 
 
     first: { 
 
     href: "//z4photorankapi-a.akamaihd.net/customers/215757/media/recent/?count=20" 
 
     } - 
 
     next: { 
 
     href: "//z4photorankapi-a.akamaihd.net/customers/215757/media/recent/?next_id=czoyOToiLTHFkzE0NDM2OTE3MTQyMTPFkzIyNjIwOTU2NjMiOw~~&count=20" 
 
     } - 
 
    } - 
 
    _embedded: [20] 
 
    0: { 
 
     _links: {... 
 
     } - 
 
     type: "IMAGE" 
 
     source: "instagram" 
 
     source_id: "398002460025587218_31000928" 
 
     original_source: "http://instagr.am/p/WF_SDxjoYS/" 
 
     caption: "Packing my first thredUP bag! #thredup #womenslaunch #bigmoney" 
 
     video_url: null 
 
     share_url: "http://www.photorank.me/photos/demo/1232903472" 
 
     date_submitted: "2013-02-24T00:36:24+00:00" 
 
     favorite: false 
 
     location: {... 
 
     } - 
 
     images: { 
 
     square: "https://z3photorankmedia-a.akamaihd.net/media/b/s/d/bsdniy/square.jpg" 
 
     thumbnail: "https://z2photorankmedia-a.akamaihd.net/media/b/s/d/bsdniy/thumbnail.jpg" 
 
     mobile: "https://photorankmedia-a.akamaihd.net/media/b/s/d/bsdniy/mobile.jpg" 
 
     normal: "https://z3photorankmedia-a.akamaihd.net/media/b/s/d/bsdniy/normal.jpg" 
 
     original: "https://z1photorankmedia-a.akamaihd.net/media/b/s/d/bsdniy/original.jpg" 
 
     } - 
 
     _embedded: {... 
 
     } - 
 
     _forms: { 
 
     report: { 
 
      title: "Report photo?" 
 
      action: { 
 
      href: "//z2photorankapi-a.akamaihd.net/media/1232903472/reports" 
 
      } - 
 
      method: "POST" 
 
      fields: [3] 
 
      0: { 
 
      type: "email" 
 
      prompt: "Email" 
 
      name: "email" 
 
      value: "" 
 
      placeholder: "my@email.com" 
 
      } - 
 
      1: { 
 
      type: "short-text" 
 
      prompt: "Reason" 
 
      name: "reason" 
 
      value: "" 
 
      placeholder: "" 
 
      } - 
 
      2: { 
 
      type: "submit" 
 
      prompt: "" 
 
      name: "send" 
 
      value: "Report" 
 
      placeholder: "" 
 
      } - 
 
      - 
 
     } - 
 
     } - 
 
     _analytics: { 
 
     oid: "1232903472" 
 
     t: "media" 
 
     meta: [3] 
 
     0: "user_agent" 
 
     1: "event_type" 
 
     2: "is_mobile" - 
 
     } - 
 
    } - 
 
    1: {... 
 
    } - 
 
    2: {... 
 
    } - 
 
    3: {... 
 
    } - 
 
    4: {... 
 
    } - 
 
    5: {... 
 
    } - 
 
    6: {... 
 
    } - 
 
    7: {... 
 
    } - 
 
    8: {... 
 
    } - 
 
    9: {... 
 
    } - 
 
    10: {... 
 
    } - 
 
    11: {... 
 
    } - 
 
    12: {... 
 
    } - 
 
    13: {... 
 
    } - 
 
    14: {... 
 
    } - 
 
    15: {... 
 
    } - 
 
    16: {... 
 
    } - 
 
    17: {... 
 
    } - 
 
    18: {... 
 
    } - 
 
    19: {... 
 
    } - 
 
    - 
 
    } - 
 
}

我的目标是把这些链接和列表在HTML文件中使用它们作为src为img标签。我真的很感激任何帮助。

我在想我可以使用response.data._embedded[0].images.normal来引用它，但这似乎并不奏效。

下面是HTML代码，我有：

<ul id="photolist"> 
 
</ul>

这里是我发送请求：

var getData = function() { 
 

 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", "http://photorankapi-a.akamaihd.net/customers/215757/media/recent/?auth_token=0a40a13fd9d531110b4d6515ef0d6c529acdb59e81194132356a1b8903790c18", true); 
 
    xhr.send(); 
 

 
    xhr.onreadystatechange = function() { 
 
    if (xhr.readyState == 4 && xhr.status == 200) { 
 

 
     var res = JSON.parse(xhr.response); 
 

 
     for (var y = 0; res.data._embedded.length; y++) { 
 

 
     var srclink = res.data._embedded[y].images.normal; 
 
     var listItem = document.createElement("li"); 
 
     var image = document.createElement('img'); 
 

 
     //add listItem to the photolist 
 
     document.getElementById('photolist').appendChild(listItem); 
 
     //add the image to the list item 
 
     listItem.innerHTML = image; 
 
     //make the image src = the hyperlink from the JSON response 
 
     image.src = srclink; 
 
     } 
 
    } 
 
    } 
 
}

当代码获取到的尝试，在这条线拉的图像点：

var srclink = res.data._embedded[y].images.normal;

我得到如下回应：

遗漏的类型错误：无法读取属性“图像”未定义的

xhr.onreadystatechange @ sliderscript.js:41

Answer 1

编辑
你必须解析JSON结果使用它作为一个适当的对象（我已经重写它使用异步XHR，但觉得免费的，如果使用同步你必须）：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://photorankapi-a.akamaihd.net/customers/215757/media/recent/?  auth_token=0a40a13fd9d531110b4d6515ef0d6c529acdb59e81194132356a1b8903790c18", true); 


xhr.send(); 

xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
    //load image 
    var res = JSON.parse(xhr.response); 
    var img = res.data._embedded[0].images.normal; 
    document.getElementById("test").src = img; 
    } 
} 

你也应该避免多余的空格在HTML属性，喜欢这里：

<img id = "test" src =""/> 

与

<img id="test" src=""/> 

你写什么是有效的HTML代替它，但增加无谓的文件大小。

最后，如果您想要编写有效的标记，请尝试使用1px白色（或任何适合您需要的颜色）作为图像的初始src，然后用javascript替换src属性。

EDIT 2

要与播放列表中，这将是正确的方式去：

var xhr = new XMLHttpRequest(), 
    photoListFrag = document.createDocumentFragment(), 
    srcLink, 
    image, 
    listItem; 

xhr.open("GET", "http://photorankapi-a.akamaihd.net/customers/215757/media/recent/?auth_token=0a40a13fd9d531110b4d6515ef0d6c529acdb59e81194132356a1b8903790c18", true); 


xhr.send(); 

xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
    //load image 
    var res = JSON.parse(xhr.response); 

    for (var y = 0; y < res.data._embedded.length; y++) { 
     image = new Image(); 
     image.src = res.data._embedded[y].images.normal; 

     listItem = document.createElement("li"); 
     listItem.appendChild(image); 

     photoListFrag.appendChild(listItem); 

    } 
    //add fragment to the photolist (once it's been filled with all the elements) 
    document.getElementById('photolist').appendChild(photoListFrag); 
    } 
} 

作品在此琴：https://jsfiddle.net/superbiche/fuontbfo/4/

Answer 2

您正确的做法。只有你需要做的是把这些数据放在一个img标签中。

例如：

<div class = "image-holder"> 
    <img id = "insta-image" src =""/> 
</div> 

<script> 
    $.getJSON("http://photorankapi-a.akamaihd.net/customers/215757/media/recent/?auth_token=0a40a13fd9d531110b4d6515ef0d6c529acdb59e81194132356a1b8903790c18",{ 
    headers: { 
     'Accept': '*/*', 
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
     }, 
    tagmode: "any", 
    format: "json", 
    async: false 
    }).success(function(response) { 
     if(response !== "") 
     { 
      var img = response.data._embedded[0].images.normal; 
      document.getElementById("insta-image").src = img; 
     } 
    }).error(function(data) { 
     console.log(data); 
    }); 


</script>