Получение изображений из базы данных с помощью вызова JQuery AJAX

Question

Controller для получения изображения:

public class PicturesSmallController : Controller 
{ 
    public ActionResult Details(int id) 
    { 
    PictureSmallManager m = new PictureSmallManager(); 
    PictureSmall p = m.Load(id); 
    ImageFormat imageFormat = ImageHelper.ConvertToImageFormat(p.ContentType); 
    return p.Trunk != null ? File(p.Trunk, p.ContentType) : null; 
    } 
} 

и вид:

<script type="text/javascript"> 
    $(document).ready(function() { 
    var picsSmall = $('#picturesSmall'); 
    picsSmall.toggle(); 
    var url = '@Url.Action("Details", "PicsSmall")'; 
    var ai = { 
    id: 69 
    }; 
    $.ajax({ 
    type: "POST", 
    url: url, 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(ai), 
    success: function (returndata) { 
     picsSmall.append($('<img/>', { 
      src: returndata, 
      alt: 'some text' 
     })); 
     select.show('slow'); 
    } 
    } 
); 
}); 
</script> 
<div id="picturesSmall"></div> 
<div id="picturesBig"></div> 

в результате я не вижу каких-либо изображение на странице, но я получил тот же результат в FireBug:

<div id="picsSmall" style="display: block;"> 
<img src="�����JFIF��`�`���� ...... �d��:1�g�" alt="some text"> 
</div> 

у меня есть два вопроса:

1. Я хотел был бы показать изображение правильно. Не могли бы вы рассказать мне, что здесь не так? Я плохо разбираюсь в mvc.
2. У меня есть два одинаковых изображения, первый из которых маленький, а второй большой. Я хотел бы показать большое изображение, когда пользователь нажимает на маленький. Каков наилучший способ его реализации?

Если я правильно понял, когда изображение загружено на клиентскую сторону, я должен сохранить его в ViewBag. Если это правильно, что лучше всего синхронизировать маленькие и большие изображения (следует ли использовать массив или объект на стороне клиента)? Есть ли другие способы? Извините, это выглядит сложнее, чем я ожидал.

Answer 1

Вы возвращаете байты изображения из своего действия. Вы не можете установить необработанные байты в качестве источника, но можете использовать Data URI scheme в качестве источника. Вам нужно будет изменить формат, который вы вернули из своего действия, чтобы правильно отформатировать строку с байтами с кодировкой base64 изображения. Обратите внимание, что некоторые браузеры имеют ограничения на размер данных.

Пример из Википедии страницы:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> 

Answer 2

установить ОПЗ изображения в

src = "data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsY...... 

и относительно показывая миниатюру интерактивной, чтобы открыть большое изображение, которое вы можете использовать UI Bloxk Plugin

Answer 3

Если вы можете конвертировать ваш объект к объекту Image (или если вы получаете объект изображения) вы можете установить тип возвращаемого метода в FileCont entResult и вернуть MemoryStream. Затем вы устанавливаете свой src как путь к вашему методу контроллера.

контроллер будет иметь что-то к следующему эффекту:

public class MyController : Controller 
{ 
    public FileContentResult GetImage(int id) 
    { 
     Image myimage = Bitmap.FromFile(Server.MapPath("~/Images/myimage.jpg")); 
     var format = System.Drawing.Imaging.ImageFormat.Jpeg; 
     string mimeType = "jpeg"; 

     MemoryStream ms = new MemoryStream(); 
     myimage.Save(ms, format); 

     return File(ms.ToArray(), "images/" + mimeType); 
    } 
} 

Вид:

<img src="/MyController/GetImage?id=<%: myImageId %>" />