I'm taking over an existing create-react-app project that already displays several image assets from an S3 bucket. I added a new image and synced it to S3, but whenever the site tries to retrieve the image, it returns a 502 Bad Gateway error.
The new image is <1MB and has the same encryption (SSE-S3) as the images that are working.
Whether the image is accessed via the webpage:
import model from '@app/assets/images/model.jpeg';
...
<img src={model} alt="model" width={190} height={234} />
or directly via url:
https://my.site.com/static/media/model.d7306ace178a406bbeee.jpeg
I get a 502. Other images displayed on the site render the image fine.
Public access on the bucket is currently blocked. I'm at a loss for where else to check. Is there an object whitelist I have to check somewhere?
Ended up being a file size issue.
My assumption that the max file size of 1 MB (max file size that can be forwarded to our load balancer) was correct. What I didn't realize was that when the lambda function in our deploy step encoded the image to base64, it increased the file size about 1.37x, so my original 800kb was surpassing 1MB on it's way from S3 through the load balancer. Shrinking the image resolved the problem.