remix-image
remix-image copied to clipboard
Josh-McFarlin
Image gets corrupted on resize
Describe the bug
Tried following the tutorial and examples to integrate remix-image in my new remix app. Unfortunately every time I attempt to use the image component it corrupts my image like so:
Your Example Website or App
https://gist.github.com/DAlperin/8121ec179a4410b79defbc3722f1e52e
Steps to Reproduce the Bug or Issue
Run linked code.
Expected behavior
As a user I expect my image to be corrupted but it is corrupted
Screenshots or Videos
No response
Platform
- OS: [Linux]
- Browser: [Brave 1.35.100 Chromium: 98.0.4758.87]
- Version: [v0.3.14]
Additional context
I've tried running the example app locally with my image which worked, so I know the image is ok. I feel like there must be some conflict or mistake with the way I have things set up?
Aha! I've tracked down the bug! I deleted the disk cache again and then it worked. So there is a bug somewhere that causes a bad version of the image to get cached and then never busted.
I believe the error was caused by Sharp corrupting the image and then it being stored in the cache.
I'm not sure why Sharp corrupted the image. Maybe there is a better way to implement the example Sharp transformer so I will look into that.
I'm curious, what did the original image look like? Maybe that can help determine what went wrong with the transformer.
Also, this also gives me the idea of adding plug-in functionality to this library. An example use of this is a post transformation function that verifies an image is valid (maybe using a package like this: https://www.npmjs.com/package/image-validator), allowing corrupted images to be dropped from the cache.
@Josh-McFarlin Ah sorry! This issue got lost in the churn. I now use remix-image pretty heavily in production, and have just started making some changes to the library to make it a bit more extensible sort of as you described, adding a small extension api surface to the library to allow things like validation, cache busting, or programmatic size/format generation (this along with adding s3 support is the big next step for me) Would you be interested if I tried to PR most of these changes back in?
Yeah that would be great @DAlperin!
By the way, I started working on a new branch for a future version. I'm a little busy at the moment so I slowed down working on it, but you can see it here: https://github.com/Josh-McFarlin/remix-image/tree/workspace/packages/remix-image