GET REST API for S3 bucket with images returns faulty image
I have an S3 bucket and created a REST API for it for PUT and GET (following this guide https://repost.aws/knowledge-center/api-gateway-upload-image-s3). I am able to upload images from my app using the API. In the S3 in the AWS console everything looks fine to me when I look at the image and when I click on "Open", well, it opens correctly. For example:
However, when I try to get the image via the API, it only works partially. It works fine in Postman:
But when I'm trying to link to the image (which is my goal) in the browser, the image cannot load, even though I'm getting a 200 successful from the API:
I tested around with setting Content-Type on Integration Response to 'image/*' (cause I would like to allow any image) and 'image/png' (this exact example). The only difference that made was when I had it as 'image/*' and I opened the link it would download the file. However, the downloaded file was then not possible to open, so I assume same issue.
It seems like I must be close since Postman can do it. What am I missing?
p.s. rather new to AWS
- Newest
- Most votes
- Most comments
I solved it myself. According to http://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings.html: If content handling is not defined, and if the Content-Type header of the response and the Accept header of the original request match an entry of the binary media types list, API Gateway passes through the body. This occurs when the Content-Type header and the Accept header are the same; otherwise, API Gateway converts the response body to the type specified in the Accept header.
But if I want to get the image through a URL, I cannot affect the Accept header (this is what Postman did different and why it worked there). So the solution was to define a content handling and then to map response header Content-Type:
Integration Response:
- Content handling: Convert to binary
- Header Mappings: Content-Type: integration.response.header.Content-Type
When "Convert to binary" is set in the integration response, the API Gateway response header Content-Type is '*/*' at first. That's why we have to add the header mapping as well: this will ensure that the API Gateway response includes the same Content-Type the backend passed in it's response to API Gateway.
That was it, now the image is returned properly so that my browser can display with a simple URL call.
Hi,
Yes, you seem to fetch the image properly. So, did you check the config of your browser re. image extensions, ad blocking, etc.
I'd suggest to verify by following guidance of this article: https://www.computerhope.com/issues/ch000813.htm ?
Best,
Didier
Hello and thank you for your answer. I do not think the browser is the issue, because it can display images, and also the image in question when I open it directly from S3 in AWS console as shown in my first screenshot. This is from the browser and image is loaded correctly. It only does not work if I access the image through the API GET link instead. To me that tells me something isn't fully returned with the API. Also please consider the last part I added in my question: when I changed response integration to 'image/*' and the file was downloaded instead (not displayed in browser), the file was faulty and not open-able in on Windows PC.
Relevant content
- Accepted Answerasked 10 months ago
- Accepted Answerasked a month ago
- asked a year ago
AWS OFFICIALUpdated a year ago- AWS OFFICIALUpdated 3 months ago
- AWS OFFICIALUpdated a year ago
- AWS OFFICIALUpdated 2 years ago
Thank you so much. this was kicking my A** for an entire day