Redirect all .jpg but allow image embed - .htaccess

Question

I have this code in my .htacess file, and does the redirection of http://www.example.com/wp-content/wp-content/uploads/2016/10/063.jpg to www.example.com/wp-content/show-image.php?path=http://www.example.com/wp-content/wp-content/uploads/2016/10/063.jpg
Somehow it works, and it won't redirect www.example.com/wp-content/show-image.php?path=http://www.example.com/wp-content/wp-content/uploads/2016/10/063.jpg as well.
RewriteEngine On
RewriteRule ^([^\.]+)\.(jpe?g|png) http://www.example.com/wp-content/show-image.php?path=http://www.example.com/wp-content/$1.jpg [R=301,NC,L]
the problem is that it will redirect images in <img src=""/> as well. I want <img src="http://www.example.com/wp-content/wp-content/uploads/2016/10/063.jpg" /> to be able to load, not to be redirected.
any idea on how to do this?

Answer 1

The only way to really do this, without modifying the URL in some way, is to check the HTTP Referer. The Referer is not set for a direct request, but is set (to your domain) when a request comes from the embedded src attribute.
However, this is prone to error and is not recommended in a professional environment. The browser might be configured to not send the Referer in the request anyway or it could even be faked.
Anyway, you can implement this by inserting a conditional check. ie. Only redirect when the Referer is not set to the expected host:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://www\.example\.com
RewriteRule ^([^\.]+)\.(jpe?g|png) http://www.example.com/wp-content/show-image.php?path=http://www.example.com/wp-content/$1.jpg [R=301,NC,L]
The ! prefix negates the CondPattern.
However, that will also prevent Googlebot etc. seeing your image URLs, unless you include further exceptions. UPDATE: And it is usually recommended to allow empty Referer headers, but this will allow direct requests (but this is probably required for Google image search and the Googlebot, which does not send a Referer header when crawling) For example, you can try:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !google
RewriteCond %{HTTP_REFERER} !^http://www\.example\.com
RewriteRule ^([^.]+)\.(jpe?g|png)$ http://www.example.com/wp-content/show-image.php?path=http://www.example.com/wp-content/$1.jpg [R=301,NC,L]
(Incidentally, you don't need to escape the dot in a character class in order to match a literal dot.)
This will block other sites from linking to your images directly (ie. hotlinking).
Modify the URL:
Otherwise, you can change the URL of your embedded image in some way. eg. Append ?noredirect=1 to the end of the URL and check for this instead in your .htaccess condition:
RewriteCond %{QUERY_STRING} !^noredirect=1$