javascript - Set image src from ajax post to rest api - Stack Overflow

admin管理员组

文章数量:1287181

Is this possible? My ajax call looks like this:

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

And on my Web.API side:

[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?

Is this possible? My ajax call looks like this:

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

And on my Web.API side:

[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?

• javascript
• jquery
• ajax
• asp-web-api

Share Improve this question Follow asked Apr 29, 2013 at 16:56 NicrosNicros 5,1931212 gold badges6161 silver badges102102 bronze badges 10

• Are you sure $( "#imagecontent" ) is already in DOM? – A. Wolff Commented Apr 29, 2013 at 16:59
• 1 Forget about this. I forgot to look at the second piece of code. Another question is, what does your API return? A URI or the actual image contents? – Kiruse Commented Apr 29, 2013 at 17:00
• @roasted Yep. I see the broken image icons loaded up into that image area. And if I return just a string with a url to some random image on the web instead of the httpresponsemessage, the images display just fine. – Nicros Commented Apr 29, 2013 at 17:01
• src of img element 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. – skuntsel Commented Apr 29, 2013 at 17:02
• 1 @Nicros if the api returns the actual image, then why the ajax call in the first place? – a better oliver Commented Apr 29, 2013 at 17:09

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

You need to return an URL pointing to image location, which can be your server method producing images.

Basically, you reverted the logics of how img tag works: src of img element 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.

What needs to be done, thus, is to return URL like /dynamic-images/image-1.jpg and intercept requests on that path so that they'd return actual content.

As far as I see, you are sending the file contents in response to the AJAX request. As @skuntsel pointed out in his ment, the src attribute 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.

It would look like this, since you're using PNG:

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

See Data: Format on the same Wikipedia article. Obviously this will work only for browsers that support it... it's quite a young technique.

Let me suggest an alternative solution. If you would / could make your API accept GET calls then things would be much easier:

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

No AJAX call needed.

本文标签： javascriptSet image src from ajax post to rest apiStack Overflow