Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Webapi返回使用jQueryAjax方法显示的二进制图像_Jquery_Ajax_Asp.net Web Api - Fatal编程技术网

Webapi返回使用jQueryAjax方法显示的二进制图像

Webapi返回使用jQueryAjax方法显示的二进制图像,jquery,ajax,asp.net-web-api,Jquery,Ajax,Asp.net Web Api,我有以下webapi方法 public HttpResponseMessage GetImage() { string imgUri = HttpContext.Current.Server.MapPath("~/Images/htmllogo.png"); var response = Request.CreateResponse(HttpStatusCode.OK); response.Content = new StreamC

我有以下webapi方法

    public HttpResponseMessage GetImage()
    {
        string imgUri = HttpContext.Current.Server.MapPath("~/Images/htmllogo.png");
        var response = Request.CreateResponse(HttpStatusCode.OK);
        response.Content = new StreamContent(new FileStream(imgUri, FileMode.Open));

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

        return response;
    }
我还有下面的html

 <div><button id="loadImage">Load</button></div>
<div id="divImageHolder"></div>
加载
我使用jquery的Ajax方法检索图像,如下所示:

$("#loadImage").click(function () {
        var options = {};
        options.url = "api/mywebapi/GetImage";
        options.type = "GET";
        //options.dataType = "image/png";
        options.contentType = "image/png";
        options.success = function (results) {          
            var imag = "<img " + "src='" + results + "'/>";

            $("#divImageHolder").html(imag);             

        };
        options.error = function (jqXHR, textStatus, errorThrown)
        {
            console.log(errorThrown);
        };
        $.ajax(options);
    });    
$(“#加载图像”)。单击(函数(){
var选项={};
options.url=“api/mywebapi/GetImage”;
options.type=“GET”;
//options.dataType=“image/png”;
options.contentType=“image/png”;
options.success=函数(结果){
var imag=“”;
$(“#divImageHolder”).html(imag);
};
options.error=函数(jqXHR、textStatus、errorshown)
{
console.log(错误抛出);
};
$.ajax(选项);
});    
单击按钮后,我看到的是divImageHolder div中的“二进制垃圾”。没有显示任何图像

我曾尝试在结果之前将“data:image/png;base64”添加到src属性,但没有成功。我认为原因是base64是文本编码,但我接收的是二进制数据

如果我使用Json并将图像转换为base64编码(在web api方法中),那么它可以正常工作,但是我无法使其与二进制文件一起工作,即我的web api方法返回StreamContent

options.dataType是特意注释掉的,因为它只接受json。如果我取消注释它,我将得到一个错误。错误是“没有从文本到图像/png的转换”,但如果我将其注释掉,我将设法获得成功方法,在该方法中我可以看到二进制结果

多谢各位

南部


此外,可能还需要“mimeType:”text/plain;charset=x-user-defined”。

您正在将结果数据设置为图像。。。如果你只是在调用一个get,那么将图片的来源设置为url…你能详细说明一下吗?你能用代码写吗。请注意,web api正在返回HttpResponseMessage您的建议有效,我只是尝试了一下,但是我仍然想看看是否有一种方法可以使用检索到的二进制数据来使用jquery Ajax方法显示图像。问题是,据我所知,浏览器并不真正支持二进制数据类型。您将得到一个字节数组,需要移位才能创建对象。一旦你拥有了这个对象,就只需要调用
URL.createObjectURL(data)
并将其分配给一个图像src。类似这样的分类(这都是在客户端完成的,但是有一个文件控件,所以略有不同,只是显示URL的东西)数据URL:除了最简单的图像之外,还有很多不应该这样做的原因@Phill的建议是可行的