'How to redirect if user direct access images via browser with Cloudflare?

In cloudflare I'm trying to make if a user is attempting to direct access any image file by browser it should redirect to where the image is originally embedded but it isn't working cause once it is redirected the image that is embedded on the page becomes broken. An example image link https://fabulous.pictures/LcOsfv7.jpeg should redirect to https://fabulous.pictures/LcOsfv7 but the embedded image becomes broken.

Here is what my page rule setting looks like enter image description here

Any fix for this? also I want to allow hotlinking if it's from social media site



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source