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"); 

这将输出的图像，使之成为一个链接。我猜你必须标记它才能得到你发布的结果。