Images not served properly

I’m using app.use('/static', express.static(ENV.STATIC_DIR)) to serve PNG and ICO files.

The files are served but not displayed, seems to have the correct Content-Type but are blank (black rectangle).

The “Response” tab in the Chrome Network view shows binary text (usually this is blank for correctly served images), so I’m guessing there’s an encoding issue but I haven’t experienced this before with Express.

[richburdon]

Hi @brettstack, thanks for your response.

#1. Yes I’m doing that.

#2. I’m using serverless.yml so this doesn’t make sense to me. However, I have tried adding */* and image/*, image/png in the the “Binary Support” tab of the API Gateway console. This doesn’t seem to make any difference.

NOTE: the IMG response shows up with the right content-type and the x-amzn-remapped-content-length header matches the original field’s size in bytes, but the content-length is wrong (bigger) so my guess is an encoding issue?

accept-ranges:bytes
cache-control:public, max-age=0
content-length:34072
content-type:image/png
date:Tue, 31 Oct 2017 22:30:35 GMT
etag:W/"63d0-4977387000"
last-modified:Tue, 01 Jan 1980 00:00:00 GMT
status:200
via:1.1 3d183dc06807f77c9361cf878faaed82.cloudfront.net (CloudFront)
x-amz-cf-id:N-gdc_PIRPhlwKqkrhB25kOKn76UCIBRFxZ_lWBzNJy_r6gp0Tm72g==
x-amzn-remapped-connection:close
x-amzn-remapped-content-length:25552
x-amzn-remapped-date:Tue, 31 Oct 2017 22:30:35 GMT
x-amzn-requestid:1d3c6c47-be8b-11e7-96af-3158705a2175
x-amzn-trace-id:sampled=0;root=1-59f8f98b-cbabf43f2ebb85cb37d69014
x-cache:Miss from cloudfront
x-powered-by:Express

NOTE: If I request the resource via postman explicitly setting the “Accept” header to “image/png” then the correct response is received.

I.e., the following returns the correct data:

curl -X GET https://www.example.com/static/img/logo.png -H 'accept: image/png' -H 'cache-control: no-cache'

But, this returns what I think is base64 encoded data:

curl -X GET https://www.example.com/static/img/logo.png -H 'cache-control: no-cache'

I have tried adding “binary support” in the API gateway console (the browser (chrome) sends the appropriate accept header image/webp,image/apng,image/*,*/* but not explicitly image/png. In fact, if the header doesn’t exactly START with image/png, then the wrong encoding is used.

Changing the “integration request” config for my /img/ path doesn’t help either.

(BTW, I spent a couple of hours trying to debug this with an AWS specialist – who was really helpful – but we can’t figure out why the Accept header isn’t respected.)

[brettstack]

Hi @richburdon there are many issues documenting how to serve binary. It mainly boils down to 2 things:

1. Ensure your content-type is defined in the third parameter of the main function awsServerlessExpress.createServer(app, null, ['image/png'])
2. Ensure the content type is listed in the API Gateway configuration (or simply / to handle all content types) https://github.com/awslabs/aws-serverless-express/blob/master/example/simple-proxy-api.yaml#L99