Question

这可能吗？我的ajax调用看起来像这样：

$.ajax( {
    type: "POST",
    url: "/reporter/api/image/getimage/",
    data: { "": httpNonAccessibleFilePath },
    success: function ( imageData ) {
        $( "#imagecontent" ).append( '<img src="' + imageData + '" />' );
    }
} );

在我的Web.API方面：

[HttpPost]
public HttpResponseMessage GetImage([FromBody]string serverPath)
{
    HttpResponseMessage response = new HttpResponseMessage();
    if (serverPath != null)
    {
        FileInfo fileInfo = new FileInfo(serverPath);
        if (fileInfo.Exists)
        {
            response.Content = new StreamContent( fileInfo.OpenRead() );
            response.Content.Headers.ContentType = new MediaTypeHeaderValue( "image/png" );
        }
    }

    return response;
}

所有位都接通好了，即我可以点击服务并返回数据......但我没有看到任何图像。我在这里缺少什么？

Answer 1

您需要返回指向图像位置的URL，该URL可以是生成图像的服务器方法。

基本上，您恢复了img代码工作方式的逻辑：src元素的img必须指向网络浏览器下载图片的位置。服务器不是将图像内容发送到img。

需要做的是返回/dynamic-images/image-1.jpg之类的网址，并拦截该路径上的请求，以便他们返回实际的内容。

Answer 2

据我所知，您正在发送文件内容以响应AJAX请求。正如@skuntsel在他的评论中指出的那样，src属性必须指向URI。但是，有一个解决方案。看看data: URI方案。它完全符合您的要求，只需要更多信息。

看起来像这样，因为你正在使用PNG：

$('#imagecontent').append('<img src="data:image/png;base64,' + imageData + '" />');

请参阅同一维基百科文章中的Data: Format。显然这只适用于支持它的浏览器......这是一种非常年轻的技术。

Answer 3

让我建议一个替代解决方案。如果您愿意/可以让您的API接受GET调用，那么事情会更容易：

var $img = $('<img/>', {
             src: "/reporter/api/image/getimage/?path=" + httpNonAccessibleFilePath
           });   
$( "#imagecontent" ).append( $img);

不需要AJAX通话。

将图像src从ajax帖子设置为rest api

3 个答案: