将图像 src 从 ajax post 设置为 rest api答案

【问题标题】：Set image src from ajax post to rest api将图像 src 从 ajax post 设置为 rest api
【发布时间】：2013-04-23 10:39:33
【问题描述】：

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

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

【问题讨论】：

你确定 $( "#imagecontent" ) 已经在 DOM 中了吗？
忘记这个吧。我忘了看第二段代码。另一个问题是，您的 API 返回什么？ URI 还是实际的图像内容？
@roasted 是的。我看到损坏的图像图标加载到该图像区域中。如果我只返回一个带有 url 的字符串，指向网络上的一些随机图像，而不是 httpresponsemessage，则图像显示得很好。
src of img 元素必须指向网络浏览器将下载图像的位置。不是服务器将图像内容发送到img。
@Nicros 如果 api 返回实际图像，那么为什么首先调用 ajax？

标签： javascript jquery ajax asp.net-web-api

【解决方案1】：

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

基本上，您还原了img 标签的工作逻辑：img 元素中的src 必须指向网络浏览器将下载图像的位置。不是服务器将图像内容发送到img。

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

【讨论】：

【解决方案2】：

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

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

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

在同一篇维基百科文章中查看Data: Format。显然，这仅适用于支持它的浏览器......这是一项相当年轻的技术。

【讨论】：

我确实试了一下，但我无法让它工作......但是 zeroflagL 使用 GET 的解决方案效果很好
@Nicros 我猜这里的问题是 data: URI 方案目前只接受 base64 编码的数据。可能您发送的数据全部以字节为单位。您将需要某种转换......考虑到这一点，zeroflagL 的解决方案是最简单且最受支持的解决方案。 ;)

【解决方案3】：

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

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

不需要 AJAX 调用。

【讨论】：

我也喜欢这种方法——我想过，但我的路径参数很疯狂\\localfile\long\path\to\image.jpg。我在该路径上尝试了 encodeURI，但在我的 REST 端得到了一个 HttpReponseException ，我还没有弄清楚。会继续努力。
有效！在 jQuery 方面，encodeURI 加上 api 中 GET 方法的正确签名，这是完美的。