Показать большое изображение Base64 MVC 4 DOTNET

Question

Сначала у меня есть несколько изображений, хранящихся в двоичном формате в SSMS, эти изображения хранятся в байтовом формате с размером байта выше 10K.

До сих пор я пробовал пару методов, которые будут перечислены ниже.

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

Проблема не в том, чтобы преобразовать изображения в base64, а в том, чтобы найти способ, которым я запрашиваю изображение из DB один за другим, используя Jquery, затем добавляю изображение base64 к атрибуту изображения в DOM.

// Примечание. Запрошенные изображения преобразуются в base64 со стороны API, но двоичный файл изображения может быть большим, поэтому Base64 всегда возвращается большим в атрибуте браузера img src, когда команда inspect сообщает, что размер файла слишком большой.

Пожалуйста, не указывайте, что я сказал, что его использование для небольших изображений ищет решение, когда кто-то заставил его работать с большими изображениями.

Изменение размера, а не вариант для него, убивает разрешение документа и то, как его нужно просматривать. Хотя, если есть решение, можете ли вы указать мне это. Я попытался изменить размер изображения, чтобы вы были в курсе, но изображения будут растянуты на презентации при растяжении, что было бы очевидно.

Помните, я прошу о лучшем подходе или могу ли я загрузить несколько изображений в DOM, используя Jquery с большим Base64.

Я также знаю, что могу показать список изображений, используя ссылки, а затем позволить пользователю щелкнуть ссылку, чтобы просмотреть это конкретное изображение.

Я использую Dotnet 4.5 MVC

Код для того, что я пробовал:

    $(function () {
    $(".my-image-tag").each(function () {
        var img = $(this);
        var apiUrl = "www.xxxx.com";
        console.log(
            $.ajax({
                type: 'GET',
                url: apiUrl ,
                data: { 'Id': img.attr('data-id') },
            }).done(function (data) {
                console.log(data.Image);
                img.attr('src', 'data:image/jpg;base64,' + data.Image);
            }).error(function (jqXHR, textStatus, errorThrown) {
                ///Need a Error Logger Page
            })
        );
    });
});

Answer 1

Как предложил Руп в комментарии, лучше всего сделать в вашем API метод, который обслуживает изображение.

<img src="/controller/getimage/imagename">

Тогда в вашем контроллере что-то вроде ...

public ActionResult getimage(string imagename)
{
   var data = //call database to get image data
   var file = //convert data into File "image/jpeg" or whatever file type you use
   return file;
}