Prevent direct access to images using the browser

I have a folder named - Images. This folder contains user profile pictures. Right now a user can see his image by just copying the image URL to his browser any time. This way he can also see other user's profile pics. What I want to achieve is - The user should be able to see his profile pic only through the PHP page on my website. If the user directly puts the image URL, it should not be displayed.

I tried to achieve this using .htaccess. This is what I have in the .htaccess file :

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mysite.com/
RewriteRule \.(gif|jpg)$ http://www.mysite.com/errorpost.jpg [R,L]

I am new to .htaccess. If there is a way to achieve this, please help.

Thanks in advance.

I have the same problem. Currently I found 2 ways:

1) base64_encode() + ajax + js/jquery

Store every image encoded by base64_encode() in binary file or database OUTSIDE www folder.
Use ajax to get that data. it should return "data:image/jpeg;base64,$enc_imgbinary"
Replace 'src' of 'img' attribute with returned result using js/jquery

pros

impossible to access image with direct link

cons

I did found not similar solution for video.
images should be encoded beforehand (or first usage) to minimize server CPU usage.
encoded images takes about 30% more space on disk => 1.3x disk space
if you want to keep original images on server => 2.3x disk space.
~30% more data will be send over the network

2) long-random-names (+symlinks)

A) Store images in www folder using long-random names
B) Store images outside www folder with symlinks to www folder. (images outside www can also work as your desktop images backup)

notes:

folders must also contain random symbols
use '.' before any folder or file name => just in case, to prevent from displaying folder content on unconfigured apache
configure apache to folow symlinks in case B) (add FlowSymlinks to httpd.conf)
configure apache to prevent folder content listing (remove Indexes from httpd.conf)
example of image hierarchy:
- www
  - .media_jmdue7jed
    - .user1_hash_!sdfsewewfsdfsds
      - .album1_name_!jfie8e7y77667fef
        
        .photo1_name_!kjio9i890v8fsd978fyreshf
        
        .photo2_name_!09098dfuujdsif87s7ysdffd
        
        ...
      - .album2_name_!ghhyuflp!huidfjh
        
        .photo1_name_!feojihudhufuuhfrufhi8484
        
        .photo2_name_!2344gfdgfdgdfefedw232sdg
        
        ...
    - .user1_hash_!j333re89dsfdsf
      - ...

pros:

Can be used for video also
You can still keep original images with original names outside www folder by creating symlinks to www folder using long-random-names. Even different for every user.
Image can be used outside your server (in forums, quick send direct link to your friend or similar)

cons

symlinks must be created beforehand (or on-fly)
Image can be accessed with direct link
- however its nearly imposible to guess it
- also you can change symlink random-name periodicaly or on image rights change (I quess google+ does so)
map original-name → long-random-name should be stored in db (or sidecard/meta file)
- (can be bypassed if you keep original-name inside long-random-name by encoding/decoding or by combining original-name + long-random-name)

=====================================

I had implemented case 1) and it worked for me fine, however I did not found similar solution for HTML5 video.

Case 2) seems more flexible. However I still not sure about security. If anyone sees security holes please let me know.