1

这可能吗？我的 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;
}

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

4

3 回答 3

3

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

基本上，您还原了img标签如何工作的逻辑：srcof imgelement必须指向 Web 浏览器将从该位置下载图像的位置。将图像内容发送到img.

因此，需要做的是返回类似 URL/dynamic-images/image-1.jpg并拦截该路径上的请求，以便它们返回实际内容。

于 2013-04-29T17:05:16.620 回答
3

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

它看起来像这样，因为您使用的是 PNG：

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

请参阅同一篇 Wikipedia 文章中的数据：格式。显然，这仅适用于支持它的浏览器......这是一项相当年轻的技术。

于 2013-04-29T17:08:16.067 回答
2

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

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

不需要 AJAX 调用。

于 2013-04-29T17:41:43.367 回答