如何使用jquery从数据库动态显示图像？

我正在使用jQuery。我需要在这里动态显示图像我有图像url我从数据库中获得它我有在我的解决方案资源管理器中放置一个文件夹Bundleimages我将数据库保存在数据库中，我得到的URL，我 pusing作为项目。使用的ImageUrl字符串生成器，它显示的图像的URL，但需要显示图像如何使用jquery从数据库动态显示图像？

<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>

这里显示的URL，但我需要显示图像的任何帮助赞赏

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

来源

2012-11-30 spider-virus

你得到正确的URL为'警报（item.ImageURL ）'？ –

是的，我收到了正确的URL –

什么是BundleDetails？ –

您的代码为我工作。
我猜你的网址不正确。
您使用的是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从数据库动态显示图像？

回答

相关问题