如何使用返回的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>