Как показать изображение в простой сетке, а не в сетке из базы данных. Изображение сохранено в формате байтового массива

Question

Я использую ASP.NET MVC 4.0 и пытаюсь показать изображение в простой сетке, но сетка кажется пустой.Изображение сохраняется в формате байтового массива.Я получаю другие данные столбца, но не изображение.

Ниже приведен полный код контроллера для сохранения изображения в формате байтового массива и отображения из базы данных: -

public ActionResult Index()
{
    return View();
}

public ActionResult Savedata(HttpPostedFileBase Image)
{
    SaveImage obj = new SaveImage();
    string result;

    if (Image != null)
    {
        HttpPostedFileBase httpobj = Request.Files["Image"];
        string[] Imagename = httpobj.FileName.Split('.');
        obj.ImageName=Imagename[0];

        using (Stream inputStream = Request.Files[0].InputStream) //File Stream which is Uploaded  
        {
            MemoryStream memoryStream = inputStream as MemoryStream;
            if (memoryStream == null)
            {
                memoryStream = new MemoryStream();
                inputStream.CopyTo(memoryStream);
            }
            obj.ImagePic = memoryStream.ToArray();
        }  

        var path = Path.GetFileNameWithoutExtension(Image.FileName) + DateTime.Now.ToString("ddMMyyhhmmss") + Path.GetExtension(Image.FileName);
        result = path.Replace(" ", string.Empty);
        var serversavepath = Path.Combine(Server.MapPath("~/DemoImages/") + result);
        Image.SaveAs(serversavepath);                

        obj.ImageName= result;
        entity.SaveImages.Add(obj);
        entity.SaveChanges();                
    }

    //return View("Index");
    return Content("<script>alert('Data Successfully Submitted');location.href='../Home/Index';</script>"); 
}

public JsonResult BindGrid()
{            
    DataRow[] result;

    var output = (from c in entity.SaveImages.AsEnumerable()
                  select new
                  {
                      ID = c.Id,
                      ImageName = c.ImageName,
                      //ImagePic = c.ImagePic,
                      ImagePic = Convert.ToBase64String(c.ImagePic)                             

                  }).ToList();           

    var data = new { result = output };

    return Json(output, JsonRequestBehavior.AllowGet);
}

Вот мойполный просмотр кода.Я использую один вид.

<script type="text/javascript">

        $(function () {

            $.post("@Url.Content("~/Home/BindGrid")", null, function (data) { bindgrid(data); }, "Json");

        });


    </script>

    <script type="text/javascript">

        $(function save() {

            debugger;
            $("#btnSave").click(function () {

                location.href = '@Url.Action("Savedata", "Home")';

            });
        });


        function bindgrid(data) {

            var body = "";
            $("#Grid tbody").empty();
            $.each(data.result, function (key, value) {

                body += "<tr><td> " + value.ID + "</td>" +

                "<td>" + value.ImageName + "</td>" +
                  "<td>" + value.ImagePic + "</td>" +

            "<td>  <a style='cursor:pointer' onclick=Edit(" + value.Id + ");>Edit</a> <a style='cursor:pointer' onclick=Delete(" + value.Id + ");>Delete</a></td></tr>";

            });
            $("#Grid tbody").append(body);
        }

    </script>
    <div>
        @using (Html.BeginForm("Savedata", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {       

            <div>  
                <table>
                    <tr>
                        <td>
                            Upload Image
                        </td>

                        <td><input type="file" name="Image" id="Image" style="width:100%" /></td>

                    </tr>
                </table>      

            </div>
            <br/>

            <div>
                <input type="submit" value="save" id="btnSave" />
            </div>
        }
        <div id="list" style="width: 997px; margin-right: 0px;">
            <table id="Grid">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>

                        <th>
                            IMAGE NAME
                        </th>
                        <th>
                            IMAGES
                        </th>
                        <th>
                            ACTION
                        </th>

                    </tr>

                </thead>
                <tbody>

                    @foreach (var item in entity.SaveImages)
                    {                       
                        <tr>
                            <td>@item.Id</td>
                            <td>@item.ImageName</td>
                            <td><img src="~/DemoImages/@item.ImagePic" width="100" height="100" /></td>    
                            @*<td><img src="string.format("data:image/png;base64 {0}",base64data)"/></td>*@                        

                        </tr>
                    }

                </tbody>
            </table>
        </div>
    </div>
</body>

Я хочу, чтобы сетка отображала изображения с другими деталями столбца.

Answer 1

Ваш серверный код выглядит немного запутанным.Я не знаю, является ли это результатом недопонимания или множественных попыток заставить его работать, или как.Но главное, что вы сохраняете образ как на диск сервера , так и в базу данных.Я не вижу причин, чтобы сделать оба.Обычно более эффективно сохранять файл непосредственно на диск и просто записывать путь и имя файла в базу данных, чтобы файл можно было найти позже.

PS Также я не могу понять, почему вы иногда использовали Request.Files["Image"];, когда файл уже доступен через переменную Image.И странно удалять расширение из имени файла при сохранении, потому что тогда вы потеряете информацию о том, что это за файл (и вместо этого вы не сохраняете тип MIME).И вы также пытаетесь задать два разных значения для obj.ImageName в разных строках.Это не имеет смысла.

Так что все, что вам действительно нужно, это, я думаю,

public ActionResult Savedata(HttpPostedFileBase Image)
{
    SaveImage obj = new SaveImage();
    string result;

    if (Image != null)
    {
        obj.ImageName = Image.FileName;

        string imageFolder = "~/DemoImages/";
        var path = Path.GetFileNameWithoutExtension(Image.FileName) + DateTime.Now.ToString("ddMMyyhhmmss") + Path.GetExtension(Image.FileName);
        result = path.Replace(" ", string.Empty);
        var serversavepath = Path.Combine(Server.MapPath(imageFolder) + result);
        Image.SaveAs(serversavepath);                

        obj.ImageName = imageFolder + result;
        entity.SaveImages.Add(obj);
        entity.SaveChanges();                
    }

    return Content("<script>alert('Data Successfully Submitted');location.href='../Home/Index';</script>"); 
}

Метод BindGrid будет очень похож, только без поля ImagePic:

public JsonResult BindGrid()
{            
    DataRow[] result;

    var output = (from c in entity.SaveImages.AsEnumerable()
      select new
      {
        ID = c.Id,
        ImageName = c.ImageName
      }).ToList();           

    var data = new { result = output };

    return Json(output, JsonRequestBehavior.AllowGet);
}

А затем в представлении вам потребуется только следующее для его отображения (поскольку имя папки уже находится в поле ImageName, поэтому это готовый относительный URL-адрес):

<img src="@item.ImageName" width="100" height="100" />

Answer 2

вы можете создать тег <img> внутри td и установить строку base64 в атрибут src.

<tbody>

                    @foreach (var item in entity.SaveImages)
                    {                       
                        <tr>
                            <td>@item.Id</td>
                            <td>@item.ImageName</td>
                            <td><img src="'data:image/jpg;base64,' + @item.ImagePic" width="100" height="100" /></td>    
                        </tr>
                    }

                </tbody>