Показать изображение в ajax из FileResult Handler (Action)

Question

Я использую Asp.net Core Razor Page для моего текущего проекта ... У меня есть обработчик страниц (Action) для отправки изображения на мою страницу с помощью Ajax ... Я отправляю запрос с ajax своему обработчику, и мой ответ: Подходящее изображение для страницы, но изображение не отображается в моем теге img src!

public IActionResult OnGetDeleteImage(ImageType imageType)
{
    return File(DefaultImage(imageType), "image/png", Guid.NewGuid().ToString());
}

... DefaultImage получить путь к изображению на сервере. и запрос ajax:

$.ajax({
    type: 'GET',
    url: deleteImagePath,
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },

    success: function (data) {
        alert(data);  
            $("#" + id).attr("src",data);

    },
    error: function (err) {
        alert(err);
    }

мой код возвращает содержимое изображения, но не показывает, что в img src. спасибо.

Answer 1

Вы пытаетесь поместить двоичное содержимое изображения в атрибут src, который ожидает URL, а не фактические данные. Вы можете попытаться отформатировать это изображение как URL-адрес данных, и оно должно работать.

Я предполагаю, что ваш метод DefaultImage возвращает путь к файлу PNG в этом примере, но я не могу сказать это точно. Чтобы вернуть данные URI, это будет выглядеть примерно так:

public IActionResult OnGetDeleteImage(ImageType imageType)
{
    return new ContentResult() {
       Content = "data:image/png;base64," + System.Convert.ToBase64String(System.IO.File.ReadAllBytes(DefaultImage(imageType))),
       ContentType = "text/plain"
    });
}

Data URI работает только с изображениями до 32K в браузерах IE, и приведенный выше код не очень эффективен.

Если возможно (например, изображение хранится в части вашего серверного приложения, которая может быть представлена ​​в виде статических файлов), было бы лучше, если бы вы могли вернуть общедоступный URI в файл изображения в методе C #, а затем браузер будет загружать файл из этого URI при обновлении src. Это будет выглядеть так:

public IActionResult OnGetDeleteImage(ImageType imageType)
{
    return new ContentResult() {
       Content=GetPublicPathTo(DefaultImage(imageType)), //this should return something like "/img/the_image_to_display.png"
       ContentType="text/plain"
    }
}