What format does the Google Places Photos API return the image in?

Question

Have a look at this API: https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=AddYourOwnKeyHere

When you invoke it using Postman, or in a browser, it returns an image which is rendered beautifully. Now, from inside an app, when I use $http or jQuery to call this API, what is returned is LOTS of "garbage". Can anyone explain what this garbage is? Is it base64 encoded binary data corresponding to the image? I need this information so that I can display this image in my app.. Neither img ng-src="{{photo}}" nor img data-ng-src="{{photo}}" worked. I also tried explicitly specifying base64 in the img tag, didn't work.

Thanks!

Answer 1

That URL returns the binary file of the image, e.g. a JPEG file. You can use that URL as the src of an <img> tag directly.

Answer 2

if i look at view source of page that returned from google api, it's api return image directly.

And exactly, it's return image/png content-type on Response Headers.

This is API code example with C# Web Api 2:

public HttpResponseMessage Get(int? id){

        var path = HostingEnvironment.MapPath("~");
        path = Path.Combine(path, "Static", "robot.png");

        HttpResponseMessage response = new HttpResponseMessage();
        var fileStream = new FileStream(path, FileMode.Open);
        var streamContent = new StreamContent(fileStream);

        response.Content = streamContent;

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

        return response;
}

and tadaaa... API is working:)