Images rendering as 16x16 empty squares.
smblee opened this issue · comments
Hello!
I just got started with the library using the cloudformation script. Outside of the script itself, I set up my own bucket for the code, another bucket for the images, new lambda@edge function for the webp detection, and a new Route53 entry for the CNAME to my domain.
The endpoint seems to have access to the s3 bucket because I am able to fetch doing https://cdn.myweb.com/existing_img.png and I get a "file not found" if I try to get a file that doesn't exist.
This is what I get for all the images:
Do you have any thoughts on what I could be doing wrong?
The same thing is happenning on my install.
I have submitted PR #115 to address the error.
I'm having the same issue. After some experimenting I figured out that the response is base64 encoded.
For example, in the browser https://d2zsj9ug4nttyf.cloudfront.net/wp-content/uploads/2019/02/Curried-Rice_2.jpg?resize=100,100 returns a 16x16 square, just like @smblee reported. If I curl that URL and base64 decode it, then I see an actual image.
Any suggestions on how to fix this? I tried the fix in #115 but that did not correct the problem for me.
@timothyjensen the returned content type looks correct, so there must be an issue with the isBase64Encoded: true response setting not being processed. Are you able to post your API gateway configuration?
It could also be related to the Cloudfront distribution settings. I'll look into that possibility.
This article covers some of the settings you may need to check, in particular the binary media types for API Gateway https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html
Let me know how you get on, we may be missing something in the Cloud Formation template.
@roborourke Thanks for picking this up. Here is my API Gateway configuration:
{
"openapi": "3.0.1",
"info": {
"title": "Tachyon",
"version": "2020-06-02T18:04:20Z"
},
"servers": [
{
"url": "https://62luhm6qbh.execute-api.us-east-1.amazonaws.com/{basePath}",
"variables": {
"basePath": {
"default": "/Prod"
}
}
}
],
"paths": {
"/{proxy+}": {
"get": {
"x-amazon-apigateway-integration": {
"uri": "arn:aws:apigateway:us-east-1:lambda:path/2015-03-31/functions/arn:aws:lambda:us-east-1:183818256687:function:tachyonImageServerStack-20200529-2-LambdaFunction-PRX6V4NGUOA1/invocations",
"passthroughBehavior": "when_no_match",
"httpMethod": "POST",
"type": "aws_proxy"
}
}
}
},
"components": {},
"x-amazon-apigateway-binary-media-types": [
"image~1*"
]
}Also, here is a log file from a recent request:
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| timestamp | message |
|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1591121397728 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Extended Request Id: NgxeaHzNoAMF-yg= |
| 1591121397728 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Verifying Usage Plan for request: 0d74ba6c-b525-4492-bbfc-39aef5c00f2a. API Key: API Stage: 62luhm6qbh/Prod |
| 1591121397729 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) API Key authorized because method 'GET /{proxy+}' does not require API Key. Request will not contribute to throttle or quota limits |
| 1591121397729 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Usage Plan check succeeded for API Key and API Stage 62luhm6qbh/Prod |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Starting execution for request: 0d74ba6c-b525-4492-bbfc-39aef5c00f2a |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) HTTP Method: GET, Resource Path: /wp-content/uploads/2019/02/Curried-Rice_2.jpg |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method request path: {proxy=wp-content/uploads/2019/02/Curried-Rice_2.jpg} |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method request query string: {resize=146,150} |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method request headers: {sec-fetch-mode=navigate, sec-fetch-site=none, Accept=image/*, CloudFront-Viewer-Country=US, CloudFront-Forwarded-Proto=https, CloudFront-Is-Tablet-Viewer=false, CloudFront-Is-Mobile-Viewer=false, User-Agent=Amazon CloudFront, X-Forwarded-Proto=https, CloudFront-Is-SmartTV-Viewer=false, Host=62luhm6qbh.execute-api.us-east-1.amazonaws.com, Accept-Encoding=gzip, Pragma=no-cache, sec-fetch-user=?1, X-Forwarded-Port=443, X-Amzn-Trace-Id=Root=1-5ed695f5-a0ac4fdd9893135a013e9ddc, Via=2.0 d90109c5a0c30f43223e0db85921c5c2.cloudfront.net (CloudFront), 1.1 4c7c693b007dfce603c83f138e31bccb.cloudfront.net (CloudFront), Cache-Control=no-cache, upgrade-insecure-requests=1, X-Amz-Cf-Id=bZDFoDgXmuBu7zToo-toC6VCPNTgrj5wdY2EMvnorvqgozSOLtPQkw==, X-Forwarded-For=72.175.225.157, 64.252.70.223, 64.252.141.152, CloudFront-Is-Desktop-Viewer=true, sec-fetch-dest=document} |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method request body before transformations: |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Endpoint request URI: https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/arn:aws:lambda:us-east-1:183818256687:function:tachyonImageServerStack-20200529-2-LambdaFunction-PRX6V4NGUOA1/invocations |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Endpoint request headers: {x-amzn-lambda-integration-tag=0d74ba6c-b525-4492-bbfc-39aef5c00f2a, Authorization=************************************************************************************************************************************************************************************************************************************************************************************************************************f07f78, X-Amz-Date=20200602T180957Z, x-amzn-apigateway-api-id=62luhm6qbh, X-Amz-Source-Arn=arn:aws:execute-api:us-east-1:183818256687:62luhm6qbh/Prod/GET/{proxy+}, Accept=application/json, User-Agent=AmazonAPIGateway_62luhm6qbh, X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPr//////////wEaCXVzLWVhc3QtMSJGMEQCIBzX/ljStOZvK5oIV2yYfaTSukNrCQ3fmIpxqnJVdyL9AiBi6zJXqt4yIYHE1gZxpRlh/St5SsbRX46NLZ+U1PdbFCq0AwhiEAAaDDM5MjIyMDU3NjY1MCIMpyn7V5HipzI29OmAKpED1pDd6oeBoxQIik+12bALL6qChVOjFfpoJ2R9F1Z7ls1kuZ67uHa1wMMK+DZgnBBw+qxgSVki14nXUwiJcylDKCr7PgRL7MT2kKxihGk+HEHIhJVbreymCmrz092MxzMKxa14OgjeXhefjnHf1WvFLrNkWU0HOCBQx [TRUNCATED] |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Endpoint request body after transformations: {"resource":"/{proxy+}","path":"/wp-content/uploads/2019/02/Curried-Rice_2.jpg","httpMethod":"GET","headers":{"Accept":"image/*","Accept-Encoding":"gzip","Cache-Control":"no-cache","CloudFront-Forwarded-Proto":"https","CloudFront-Is-Desktop-Viewer":"true","CloudFront-Is-Mobile-Viewer":"false","CloudFront-Is-SmartTV-Viewer":"false","CloudFront-Is-Tablet-Viewer":"false","CloudFront-Viewer-Country":"US","Host":"62luhm6qbh.execute-api.us-east-1.amazonaws.com","Pragma":"no-cache","sec-fetch-dest":"document","sec-fetch-mode":"navigate","sec-fetch-site":"none","sec-fetch-user":"?1","upgrade-insecure-requests":"1","User-Agent":"Amazon CloudFront","Via":"2.0 d90109c5a0c30f43223e0db85921c5c2.cloudfront.net (CloudFront), 1.1 4c7c693b007dfce603c83f138e31bccb.cloudfront.net (CloudFront)","X-Amz-Cf-Id":"bZDFoDgXmuBu7zToo-toC6VCPNTgrj5wdY2EMvnorvqgozSOLtPQkw==","X-Amzn-Trace-Id":"Root=1-5ed695f5-a0ac4fdd9893135a013e9ddc","X-Forwarded-For":"72.175.225.157, 64.252.70.223, 64.252.14 [TRUNCATED] |
| 1591121397730 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Sending request to https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/arn:aws:lambda:us-east-1:183818256687:function:tachyonImageServerStack-20200529-2-LambdaFunction-PRX6V4NGUOA1/invocations |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Received response. Status: 200, Integration latency: 1446 ms |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Endpoint response headers: {Date=Tue, 02 Jun 2020 18:09:59 GMT, Content-Type=application/json, Content-Length=13126, Connection=keep-alive, x-amzn-RequestId=7361f83c-7076-431a-87f7-d11786db8748, x-amzn-Remapped-Content-Length=0, X-Amz-Executed-Version=$LATEST, X-Amzn-Trace-Id=root=1-5ed695f5-a0ac4fdd9893135a013e9ddc;sampled=0} |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Endpoint response body before transformations: {"statusCode":200,"headers":{"Content-Type":"image/jpeg","Cache-Control":"max-age=31536000","Last-Modified":"Tue, 02 Jun 2020 18:09:59 GMT"},"body":"/9j/4AAQSkZJRgABAQAAAQABAAD/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAAA4YwAA6AMAADhjAADoAwAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAJIAAAADoAQAAQAAAJYAAAAAAAAA/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgAlgCSAwEiAAIRAQMRAf/EABwAAAIDAQEBAQAAAAAAAAAAAAYHAAQFAwgCAf/EAD8QAAEDAgUCBAQFAgQEBwEAAAECAwQFEQAGEiExE0EHIlFhFDJxgRUjQpGhCFIzYrHBFnKC0SRDc6Ky4fDx/8QAGgEAAgMBAQAAAAAAAAAAAAAABAUCAwYBAP/EADMRAAEDAgQDBwMDBQEAAAAAAAEAAgMEERIhMUEFE1EiYXGBkaHwFLHBI9HxBjJCUuEk/9oADAMBAAIRAxEAPwA/zFlWkVenrruWZLamGElT8C+7f/KP9j9sJqozQ8p/oRk3vuu3bFinQKplbNi3abV35CJv5ZRFTqStStghSf8A [TRUNCATED] |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method response body after transformations: /9j/4AAQSkZJRgABAQAAAQABAAD/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAAA4YwAA6AMAADhjAADoAwAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAJIAAAADoAQAAQAAAJYAAAAAAAAA/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgAlgCSAwEiAAIRAQMRAf/EABwAAAIDAQEBAQAAAAAAAAAAAAYHAAQFAwgCAf/EAD8QAAEDAgUCBAQFAgQEBwEAAAECAwQFEQAGEiExE0EHIlFhFDJxgRUjQpGhCFIzYrHBFnKC0SRDc6Ky4fDx/8QAGgEAAgMBAQAAAAAAAAAAAAAABAUCAwYBAP/EADMRAAEDAgQDBwMDBQEAAAAAAAEAAgMEERIhMUEFE1EiYXGBkaHwFLHBI9HxBjJCUuEk/9oADAMBAAIRAxEAPwA/zFlWkVenrruWZLamGElT8C+7f/KP9j9sJqozQ8p/oRk3vuu3bFinQKplbNi3abV35CJv5ZRFTqStStghSf8AfBjSsoQZjTz+lchLTwadbWSElfKgSnewwHLO2O2LdHxROcDZJicwpwSJSxYIGkEd8A0iQpTiiLkX2Hph9SGqHU5KoT9Lix6bqUguRVLG4Nibkk4CM6+GcCiulyi1H4tso6nQWoFYSf7SOf8AXHmTMeV6 [TRUNCATED] |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method response headers: {Content-Type=image/jpeg, Cache-Control=max-age=31536000, Last-Modified=Tue, 02 Jun 2020 18:09:59 GMT, X-Amzn-Trace-Id=Root=1-5ed695f5-a0ac4fdd9893135a013e9ddc;Sampled=0} |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Successfully completed execution |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) Method completed with status: 200 |
| 1591121399176 | (0d74ba6c-b525-4492-bbfc-39aef5c00f2a) AWS Integration Endpoint RequestId : 7361f83c-7076-431a-87f7-d11786db8748 |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@timothyjensen looks right judging by our CF template. Is this definitely with API Gateway v1?
You could try updating the following section with the contentHandling property:
{
"x-amazon-apigateway-integration": {
"uri": "arn:aws:apigateway:us-east-1:lambda:path/2015-03-31/functions/arn:aws:lambda:us-east-1:183818256687:function:tachyonImageServerStack-20200529-2-LambdaFunction-PRX6V4NGUOA1/invocations",
"passthroughBehavior": "when_no_match",
"httpMethod": "POST",
"type": "aws_proxy",
"contentHandling": "convert_to_binary"
}
}Te only other thing I can think of is that the binary media types setting isn't working so it might be worth trying changing that to:
{
"x-amazon-apigateway-binary-media-types": [
"image/jpg",
"image/jpeg"
"image/png",
"image/gif",
"image/webp"
]
}@roborourke As far as I know we are using the API Gateway v1, but honestly I don't see a version listed anywhere.
Thanks for your suggestion to include the contentHandling property and specify the binary media types explicitly. I gave both a try and deployed the new API, but unfortunately the result did not change.
Here's our full API Gateway config from a production endpoint:
{
"openapi": "3.0.1",
"info": {
"title": "altis-auth-ecs-tachyon-123badde",
"description": "Tachyon",
"version": "2020-02-26T16:00:02Z"
},
"servers": [
{
"url": "https://abcd123456.execute-api.us-east-1.amazonaws.com/{basePath}",
"variables": {
"basePath": {
"default": "/Prod"
}
}
}
],
"paths": {
"/{proxy+}": {
"get": {
"x-amazon-apigateway-integration": {
"uri": "arn:aws:apigateway:us-east-1:lambda:path/2015-03-31/functions/arn:aws:lambda:us-east-1:123456789011:function:altis-auth-ecs-tachyon-123badde/invocations",
"passthroughBehavior": "when_no_match",
"httpMethod": "POST",
"timeoutInMillis": 29000,
"type": "aws_proxy"
}
}
}
},
"components": {},
"x-amazon-apigateway-binary-media-types": [
"image/*"
]
}Only functional difference I see there is the binary media types handler; yours has ~1*, whereas ours has /. I seem to recall ~1 being an encoding somewhere in AWS, so maybe you've accidentally encoded it when it's not meant to be?
(And by "you've accidentally encoded it" I mean "we've accidentally encoded it in the example CF template")
Thanks @timothyjensen! Looks like we had accidentally copied over the JSON Patch syntax (which has escaping for /) into the template file 🤦 I'll fix that up!
Actually, I needed to add image/* as well as "contentHandling": "convert_to_binary" that @roborourke suggested. So the full config is:
{
"swagger": "2.0",
"info": {
"version": "2020-06-02T18:49:17Z",
"title": "Tachyon"
},
"host": "62luhm6qbh.execute-api.us-east-1.amazonaws.com",
"basePath": "/Prod",
"schemes": [
"https"
],
"paths": {
"/{proxy+}": {
"get": {
"responses": {
"200": {
"description": "200 response"
}
},
"x-amazon-apigateway-integration": {
"uri": "arn:aws:apigateway:us-east-1:lambda:path/2015-03-31/functions/arn:aws:lambda:us-east-1:183818256687:function:tachyonImageServerStack-20200529-2-LambdaFunction-PRX6V4NGUOA1/invocations",
"passthroughBehavior": "when_no_match",
"httpMethod": "POST",
"contentHandling": "CONVERT_TO_BINARY",
"type": "aws_proxy"
}
}
}
},
"x-amazon-apigateway-binary-media-types": [
"image/*"
]
}
Thanks, updated the example config :)