javascript 将 ajax post 中的图像 src 设置为 rest api
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16284150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set image src from ajax post to rest api
提问by Nicros
Is this possible? My ajax call looks like this:
这可能吗？我的 ajax 调用如下所示：
$.ajax( {
type: "POST",
url: "/reporter/api/image/getimage/",
data: { "": httpNonAccessibleFilePath },
success: function ( imageData ) {
$( "#imagecontent" ).append( '<img src="' + imageData + '" />' );
}
} );
And on my Web.API side:
在我的 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;
}
All the bits are wired up okay, i.e. I can hit the service and it returns data... but I don't see any images. What am I missing here?
所有的位都连接好，即我可以点击服务并返回数据......但我没有看到任何图像。我在这里错过了什么？
回答by skuntsel
You need to return an URL pointing to image location, which can be your server method producing images.
您需要返回一个指向图像位置的 URL，这可以是您生成图像的服务器方法。
Basically, you reverted the logics of how imgtag works: srcof imgelement must point to a location from where the web browser will download the image. It is not the server that will send the image content to the img.
基本上，您恢复了img标签如何工作的逻辑：srcof imgelement must point to a location from where the web browser will download the image。不是服务器将图像内容发送到img.
What needs to be done, thus, is to return URL like /dynamic-images/image-1.jpgand intercept requests on that path so that they'd return actualcontent.
因此，需要做的是返回类似 URL 的 URL/dynamic-images/image-1.jpg并拦截该路径上的请求，以便它们返回实际内容。
回答by Kiruse
As far as I see, you are sending the file contents in response to the AJAX request. As @skuntsel pointed out in his comment, the srcattribute must point to a URI. However, there is a solution to this. Have a look at the data:URI scheme. It does exactly what you are looking for, just needs a little more information.
据我所知，您正在发送文件内容以响应 AJAX 请求。正如@skuntsel 在他的评论中指出的那样，该src属性必须指向一个 URI。但是，有一个解决方案。看看数据：URI 方案。它完全符合您的要求，只是需要更多信息。
It would look like this, since you're using PNG:
它看起来像这样，因为您使用的是 PNG：
$('#imagecontent').append('<img src="data:image/png;base64,' + imageData + '" />');
See Data: Formaton the same Wikipedia article. Obviously this will work only for browsers that support it... it's quite a young technique.
请参阅同一维基百科文章中的数据：格式。显然这仅适用于支持它的浏览器......这是一项相当年轻的技术。
回答by a better oliver
Let me suggest an alternative solution. If you would / could make your API accept GET calls then things would be much easier:
让我提出一个替代解决方案。如果您愿意/可以让您的 API 接受 GET 调用，那么事情会容易得多：
var $img = $('<img/>', {
src: "/reporter/api/image/getimage/?path=" + httpNonAccessibleFilePath
});
$( "#imagecontent" ).append( $img);
No AJAX call needed.
不需要 AJAX 调用。
