在FileResult Handler中以ajax显示图像(操作) [英] Show image in ajax from FileResult Handler (Action)

问题描述

我在当前项目中使用Asp.net Core Razor页面...我有一个页面处理程序(操作)，用于使用Ajax将图像发送到我的页面...我向我的处理程序发送带有ajax的请求，我的响应是合适的图像到页面，但图像未显示在我的img src标签中！

i using Asp.net Core Razor Page for my Current Project ... I have a Page-Handler (Action) for send image to my page with Ajax ... I send request with ajax to my handler and my response is Suitable image to page but image dont show in my img src tag !

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

... DefaultImage获取服务器上的图像路径.和ajax请求:

... DefaultImage get image path on server . and ajax request :

$.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中显示.谢谢.

my code return image content but dont show that in img src . thanks.

推荐答案

您正在尝试将图像的二进制内容放入 src 属性中，该属性需要一个URL，而不是实际数据.您可以尝试将该图像格式化为数据url，它应该可以工作.

You are trying to place the binary contents of the image into the src attribute which expects a url, not the actual data. You can try to format that image as data url and it should work.

在此示例中，我假设您的 DefaultImage 方法返回了PNG文件的路径，但是我不确定.要返回数据uri，它看起来应该像这样:

I am assuming your DefaultImage method returns a path to a PNG file in this example, but I can't tell that for sure. To return a data uri, it would look something like this:

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仅在IE浏览器中可用于最大32K的图像，并且上面的代码效率不高.

Data uri only works on images up to 32K in IE browsers, and the code above isn't very efficient.

如果可能的话(例如，图像存储在服务器端应用程序的一部分中，可以作为静态文件存储)，最好是可以使用C#方法将可公开访问的uri返回到图像文件，然后，当您更新 src 时，浏览器将从该uri下载文件.看起来像这样:

If possible (e.g. the image is stored in part of your server-side app that can be served up as static files), it would be best if you could return a publicly accessible uri to the image file on the C# method, and then the browser would download the file from that uri when you updated src. That would look like this:

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

这篇关于在FileResult Handler中以ajax显示图像(操作)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！