Get binary data with image/* Accept header that is used by browsers for img tags

[christiaanwesterbeek]

Thanks to #802 we can get binary output using the Accept: application/octet-stream header. Works fine. I can fetch my binary, which is an image using Postman:

But now, I want to get that image in an img tag like so:

<img src="http://server:3000/images?select=binary_data&id=eq.f6deb9ff-839f-426c-baa0-0f05ebbab691">

But the result is a 200 with an empty response. Probably because the Accept header is not application/octet-stream, but image/webp,image/apng,image/*,*/*;q=0.8

I know I can use a base64 data img src and I know about the pros and cons. In need the url's as img src. Later I'll setup a CDN to cache the images from the api. But for now;

What can I do to get binary output from the api with the image/* header that the browser is currently sending along with the img request?

[begriffs]

Regardless of whether it's a good idea to serve images from the database, and many people advise against it, this does seem like a postgrest bug. Your Accept header included */* so the server is free to make a response with application/octet-stream. The blank response is odd.

[christiaanwesterbeek]

It would indeed be a very bad idea to serve every image for every user from the database, but I'm going to put a CDN in front of it, so it'll be every image just once within the expiration period from the database and the rest from the CDN.

Your Accept header included / so the server is free to make a response with application/octet-stream.

Would be great if it could. I'm sorry to say I have zero experience in Haskell. Otherwise, I'd give it a go. I'd need to find some free time first to learn the language.

The blank response is odd.

Odd indeed. Just did a retest to verify it for myself.

[begriffs]

I'm going to put a CDN in front of it

Oops, I missed that in the first message. Seems fine then. Stored procedures allow you to set a sql variable btw that allows you to set response headers, so you can set the caching the way you need to.

Would be great if it could. I'm sorry to say I have zero experience in Haskell.

I'll look into it over the weekend, it may not be so hard to fix.

[christiaanwesterbeek]

Stored procedures allow you to set a sql variable btw that allows you to set response headers

Excellent

I'll look into it over the weekend, it may not be so hard to fix.

You rock!

Btw, I'm using Postgrest on Heroku deployed with the buildpack.

[christiaanwesterbeek]

I'm now using Cloudfront as a CDN in front of the image api that I configured to change the accept header.

So the img tag causes a request to Cloudfront with Accept: image/*, etc. Cloudfront than alters it to application/octet-stream and calls the api that serves the binary. So, I'm good now.

Functionally this is not a requirement for me anymore...

[begriffs]

Glad you found a way to integrate it with the CDN. I was thinking about this feature more and running into a difficulty for the general solution. If a client specifies */* for the accept header, most probably they want json (which was how the server interpreted your request), but RPC calls also support csv and octet-stream. I'm not sure how the accept header the browser sends for an image is enough of a hint, unless we interpret image/* as a synonym for application/octet-stream.

[christiaanwesterbeek]

I was looking into the Accept header that different browsers are using for the img tag.

For example when Safari requests an image, there is:

Accept: image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
                                              ^^^

When Safari requests a stylesheet, there is

Accept: text/css,*/*;q=0.1
                 ^^^

So */* in Accept just isn't enough to decide binary or text.

I suppose the occurrence of any of these literal values image/*, video/* and audio/* would be safe to assume binary for. Those could indeed be a synonym for application/octet-stream.

[witsch]

I suppose the occurrence of any of these literal values image/*, video/* and audio/* would be safe to assume binary for. Those could indeed be a synonym for application/octet-stream.

Would this be an acceptable compromise? If so, I'd try to come up with a pull request...

[steve-chavez]

@witsch Yes, I think that would be good. PR whenever you're ready.

[steve-chavez]

Solved by #1349.

Now it's possible to add this config option:

raw-media-types = ["image/apng"]

And a request with Accept: image/apng should respond with the wanted media type.

[koturwaraditi]

I am also facing the same issue .. how I need to set the img inside the img src tag ?
In my case I want to calling the Api inside the img tag i.e <img src="http://ip/images?filename=example.png>
which will resize the image file and return the resized image as a response

I have tested my api it is returning the data in the form of byte but when I am calling inside the img tag it is give me the empty response.

Can some one help me how can I return the image as a response and display it in the img tag

[steve-chavez]

@koturwaraditi Check http://postgrest.org/en/v7.0.0/how-tos/providing-images-for-img.html