AJAX mvc web api：使用圖像創建div

Question

我正在使用restful API，MVC和ajax。我試圖從後端獲取數據，然後在一些div中顯示圖像。結果應該是以下幾點：

這是我的後端代碼：

/*route:api/images*/ 
    [HttpGet] 
public IEnumerable<DTO> GetData(string Id) { 
     /*Do something*/ 
     return Dto;/*the dto has an imgurl property*/   
    } 

在我的前端

<div id="mydiv></div> 

    <script> 
    $(document).ready(function() { 
     $.ajax({ 
      url: "http://localhost:59245/api/api/images", 
      type: "Get", 
      success: function (data) {     
       for (var i = 0; i < data.length - 1; i++) { 
        $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+ 
      '<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+ 
      data[i].ImagenUrl+'</a><p>'+data[i].Paragraph+'</p></div>' 
      ).appendTo("#mydiv"); 
       } 
      }, 
      error: function (msg) { alert(msg); } 
     }); 
    }); 
</script> 

我的問題是，當我嘗試以顯示內部＃圖像mydiv，這是結果：

我們可以看到，錨標籤是wrappi但是在我的ajax代碼中，我並不想這麼做。 我該如何解決它？ 感謝

Answer 1

你沒有img標籤。試試這個

<script> 
$(document).ready(function() { 
    $.ajax({ 
     url: "http://localhost:59245/api/api/images", 
     type: "Get", 
     success: function (data) {     
      for (var i = 0; i < data.length - 1; i++) { 
       $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+ 
     '<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+ 
     data[i].ImagenUrl+'"><img src="'+data[i].ImagenUrl+'"/></a><p>'+data[i].Paragraph+'</p></div>' 
     ).appendTo("#mydiv"); 
      } 
     }, 
     error: function (msg) { alert(msg); } 
    }); 
}); 

Answer 2

我可以在這裏看到一個錯字 - 在<a>標籤未關閉：

$('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+ 
     '<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+ 
     data[i].ImagenUrl+'"><img src="'+ 
     data[i].ImagenUrl+'"></a></div>' 
     ).appendTo("#mydiv"); 

這將輸出的圖像，使之成爲一個鏈接。我猜你必須標記它才能得到你發佈的結果。