jquery를 사용하여 db에서 이미지를 동적으로 표시하는 방법은 무엇입니까?

jQuery로 작업하고 있습니다. 이미지를 동적으로 표시 할 필요가 있습니다. 이미지 URL이 필요합니다. db에서 가져 오는 것입니다. 내 솔루션 탐색기에 폴더 하나를 넣으십시오. Bundleimages DB에 URL을 저장하고 있는데, URL이 나옵니다. 나는 항목으로 pusing하고 있습니다. 이미지 URL은 이미지 URL을 표시하지만, 이미지를이 URL을 표시 여기jquery를 사용하여 db에서 이미지를 동적으로 표시하는 방법은 무엇입니까?

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = "http://localhost:1711/api/ProductGet/GetProduct"; 
     $.getJSON(url, function (data) { 
      var jsd = JSON.stringify(data); 
      var data1 = '{"Items":' + jsd + '}'; 
      var k = jQuery.parseJSON(data1); 
      alert(data); 
      $.each(k.Items, function (i, item) { 
       var stringbuilder = []; 
       stringbuilder.push(' <div ><span class="span1"><img src="' + item.ImageURL + '" name="productimage"></span><span class="span2">' + item.ProductName + '</span><p>' + item.MaximumPrice + '</p></div>'); 
       $('#BundleDetails').append(stringbuilder.join('')); 
      }); 
     }); 
</script> 

<div class="span7" style="border: 1px black" id="BundleDetails"> 

</div>

를 표시해야하지만 이미지를 어떤 도움을 표시해야한다 스트링 빌더를 사용하여이

<img src="' + item.ImageURL + '" name="productimage">

출처

2012-11-30 spider-virus

당신이 경고'에 대한 올바른 URL을 받고있다 (item.ImageURL)'? –

예 올바른 URL을 얻고 있습니다 –

무엇이'BundleDetails'입니까? –

귀하의 코드는 나를 위해 작동 감사합니다.
URL이 잘못되었습니다.
MVC를 사용하고 있는데 URL을 올바르게 매핑 했습니까?

이
나 ::

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <title>DynamicImages</title> 
    @Html.jQuery() 

    <script type="text/javascript"> 
     $(document).ready(function() 
     { 

      var url = "@Url.Action("GetImageList", "Home")"; 
      $.getJSON(url, function (data) { 
       var jsd = JSON.stringify(data); 
       var data1 = '{"Items":' + jsd + '}'; 
       var k = jQuery.parseJSON(data1); 
       alert(data); 

       $.each(k.Items, function (i, item) 
       { 
        var stringbuilder = []; 
        stringbuilder.push(' <div ><span class="span1"><img src="' + item.ImageURL + '" name="productimage"></span><span class="span2">' + item.ProductName + '</span><p>' + item.MaximumPrice + '</p></div>'); 
        $('#BundleDetails').append(stringbuilder.join('')); 
       }); 

      }); // End getJSON 

     }); // End document.ready 
    </script> 
</head> 
<body> 
    <!-- 
    <div class="span7" style="border: 1px black" id="separat"> 
     <ul class="thumbnails bootstrap-examples pre-scrollable" id="productbundles"> 
     </ul> 
    </div> 
    --> 

    <div id="BundleDetails"> 


    </div> 
</body> 
</html>

을 작동 그리고 이것은 내 컨트롤러 :

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Mvc; 

    namespace TestApp.Controllers 
    { 


     public class HomeController : Controller 
     { 

     public class ImageToDisplay 
     { 
      public string ImageURL; 
      public string ProductName; 
      public string MaximumPrice; 
     } 


     public JsonResult GetImageList() 
     { 
      List<ImageToDisplay> ls = new List<ImageToDisplay>(); 

      ls.Add(new ImageToDisplay { ImageURL = Url.Content("~/Content/images/editor.jpg"), ProductName = "Test1", MaximumPrice = "lol" }); 
      ls.Add(new ImageToDisplay { ImageURL = Url.Content("~/Content/images/google_plus_one_coin.png"), ProductName = "Test2", MaximumPrice = "lol" }); 

      return Json(ls, JsonRequestBehavior.AllowGet); 
     } // End Action GetImageList 



     public ActionResult DynamicImages() 
     { 
      return View(); 
     } // End Action About 


     public ActionResult About() 
     { 
      return View(); 
     } // End Action About 


    } // End Class HomeController : Controller 


} // End Namespace IssueTracker.Controllers

증명 : Proof

출처

2012-11-30 12:15:26

jquery를 사용하여 db에서 이미지를 동적으로 표시하는 방법은 무엇입니까?

답변

관련 문제