I have created an online shop project in ASP.NET Core 3.1 which I host in Azure. I use Cloudflare to help optimise things and also make use of their SSL. Knowing that Cloudflare caches items like images and css by default, I defined a couple of page rules to prevent it caching images of products, because they change all the time and I can't have customers seeing old images.
Hosted
https://mysite.azurewebsites.net
My domain
https://www.mysite.co.uk
The problem I have is that, despite my best attempts to bypass the caching of the images, it only seems to partially work. When a user uploads a new image they have to perform a force update (ctrl+F5) in the browser to see that change, as if it's still caching the image. Here is an example of the directory structure of my site and where the images live, obviously the number is an ID created when a product is created.
https://www.mysite.co.uk/images/products/87/image300.jpg
https://www.mysite.co.uk/images/products/88/image300.jpg
https://www.mysite.co.uk/images/products/94/image300.jpg
https://www.mysite.co.uk/images/products/27/image300.jpg
To get around the caching of the above directories I tried adding page rules within the Cloudflare dashboard, despite my best efforts I cannot get Cloudflare to stop caching all the images within the products directories, or at the very least show the end user that the images have been updated.
Rules
mysite.co.uk/images/*
Cache Level: Bypass
www.mysite.co.uk/images/*
Cache Level: Bypass
I have also set the Browser Cache TTL to "Respect Existing Headers".
Is the above mentined behaviour normal or have I set something up incorrectly?
