Question

我正在使用jQuery。我需要在这里动态显示图像我有图像网址我从db我得到它把一个文件夹放在我的解决方案资源管理器中Bundleimages我在db中保存了url我正在获取的url和我作为项目。 ImageUrl使用字符串构建器它显示图像URL但需要显示图像

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

Answer 1

您的代码适合我。
我猜您的网址不正确你正在使用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

如何使用jquery从db动态显示图像？

1 个答案: