Automatic image resize tool not functioning correctly under Cloudflare

Recently, I created a tool to resize an image as needed. For example, show the image in small dimensions where the container is small, medium dimensions where the container is medium, and so on… The tool works like a silver bullet locally. However, when I deployed the website, I received strange results. Some “resized” images loaded correctly and other “resized” images loaded as blanks. I couldn’t understand what was the problem because each time I load the page the blanks appear in a different order (Example, an image that loaded properly on one-page load can appear as blank on another). I expected the problem to be a caching issue (Cloudflare trying to cache the images that are actually generated on page load). I am not sure if that’s a good approach to follow or if it was a bug from the cache.

Link to Github repo: ImageResizer
Link to Stackoverflow: Stackoverflow

It sounds like some images aren’t loading at all.

A good start would be to use your browser’s Dev Tools to watch the Console log and check the Network tab for problems loading images.

If I right click a blank image and open it in a new tab, it loads!

That’s an additional request, which is why I suggest you check the Network tab for a result code on that image.

The blank images are getting a 403 error status. I uploaded a sample preview/demo under the following URL:

Demo URL

This topic was automatically closed after 14 days. New replies are no longer allowed.