javascript - 将ajax post中的图像src设置为rest api

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，该位置可以是生成图像的服务器方法。

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

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