WordPress not showing images in all browsers

Question

A non-commercial website of mine, danijelaenjoriskoken.nl, has a strange problem.

On many systems it shows perfectly all images.

But, several systems (about 25% of known systems) don't show the images, only a blank rectangle with a small image icon in the center. However, if you right click this rectangle and choose 'View image', the correct image is shown. Returning back to the original page, the image suddenly shows up. Until you refresh the page... this causes the disappearance of the image again.

I can't figure out differences between browser showing and not showing the images:

1. I can see the images on my Android phone, on my mac book, on my Windows laptop and Desktop (IE, Edge, Safari and Chrome)
2. I can't see the images myself on my Android tablet. Friends not seeing the images are having iPhone 5 and 6, mac book, Windows Desktop.

It can't be a simple rights issue, as it is possible on every system to view the image, though you have to view the image directly first.

After having viewed, it can be shown in the page... until you reload, like it is due to some caching it is shown in the page. But this means that WordPress always knows about the correct location of the image.

I have googled and searched on this site, but I only find questions about completely missing images, due to incorrect rights, incorrect encodings, incorrect media libraries, etc.

Update 1 The problem seems to be caused by having www in the url (see the comments).

I do have WP Security module installed, which has a Copy Protection option, but that isn't checked.

I checked the .htaccess, but I can't figure it out myself. This is the content:

    # BEGIN All In One WP Security
    #AIOWPS_BASIC_HTACCESS_RULES_START
    
    
    Require all denied
    
    
    Order deny,allow
    Deny from all
    
    
    ServerSignature Off
    LimitRequestBody 10240000
    
    
    Require all denied
    
    
    Order deny,allow
    Deny from all
    
    
    #AIOWPS_BASIC_HTACCESS_RULES_END
    #AIOWPS_PINGBACK_HTACCESS_RULES_START
    
    
    Require all denied
    
    
    Order deny,allow
    Deny from all
    
    
    #AIOWPS_PINGBACK_HTACCESS_RULES_END
    #AIOWPS_DEBUG_LOG_BLOCK_HTACCESS_RULES_START
    
    
    Require all denied
    
    
    Order deny,allow
    Deny from all
    
    
    #AIOWPS_DEBUG_LOG_BLOCK_HTACCESS_RULES_END
    #AIOWPS_DISABLE_INDEX_VIEWS_START
    Options -Indexes
    #AIOWPS_DISABLE_INDEX_VIEWS_END
    #AIOWPS_DISABLE_TRACE_TRACK_START
    
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} ^(TRACE|TRACK)
    RewriteRule .* - [F]
    
    #AIOWPS_DISABLE_TRACE_TRACK_END
    #AIOWPS_FORBID_PROXY_COMMENTS_START
    
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} ^POST
    RewriteCond %{HTTP:VIA} !^$ [OR]
    RewriteCond %{HTTP:FORWARDED} !^$ [OR]
    RewriteCond %{HTTP:USERAGENT_VIA} !^$ [OR]
    RewriteCond %{HTTP:X_FORWARDED_FOR} !^$ [OR]
    RewriteCond %{HTTP:X_FORWARDED_HOST} !^$ [OR]
    RewriteCond %{HTTP:PROXY_CONNECTION} !^$ [OR]
    RewriteCond %{HTTP:XPROXY_CONNECTION} !^$ [OR]
    RewriteCond %{HTTP:HTTP_PC_REMOTE_ADDR} !^$ [OR]
    RewriteCond %{HTTP:HTTP_CLIENT_IP} !^$
    RewriteRule wp-comments-post\.php - [F]
    
    #AIOWPS_FORBID_PROXY_COMMENTS_END
    #AIOWPS_DENY_BAD_QUERY_STRINGS_START
    
    RewriteEngine On
    RewriteCond %{QUERY_STRING} ftp:     [NC,OR]
    RewriteCond %{QUERY_STRING} http:    [NC,OR]
    RewriteCond %{QUERY_STRING} https:   [NC,OR]
    RewriteCond %{QUERY_STRING} mosConfig [NC,OR]
    RewriteCond %{QUERY_STRING} ^.*(globals|encode|localhost|loopback).* [NC,OR]
    RewriteCond %{QUERY_STRING} (\;|'|\"|%22).*(request|insert|union|declare|drop) [NC]
    RewriteRule ^(.*)$ - [F,L]
    
    #AIOWPS_DENY_BAD_QUERY_STRINGS_END
    #AIOWPS_SIX_G_BLACKLIST_START
    # 6G FIREWALL/BLACKLIST
    # @ https://perishablepress.com/6g/

    # 6G:[QUERY STRINGS]
    
    RewriteEngine On
    RewriteCond %{QUERY_STRING} (eval\() [NC,OR]
    RewriteCond %{QUERY_STRING} (127\.0\.0\.1) [NC,OR]
    RewriteCond %{QUERY_STRING} ([a-z0-9]{2000,}) [NC,OR]
    RewriteCond %{QUERY_STRING} (javascript:)(.*)(;) [NC,OR]
    RewriteCond %{QUERY_STRING} (base64_encode)(.*)(\() [NC,OR]
    RewriteCond %{QUERY_STRING} (GLOBALS|REQUEST)(=|\[|%) [NC,OR]
    RewriteCond %{QUERY_STRING} (|%3) [NC,OR]
    RewriteCond %{QUERY_STRING} (\|\.\.\.|\.\./|~|`||\|) [NC,OR]
    RewriteCond %{QUERY_STRING} (boot\.ini|etc/passwd|self/environ) [NC,OR]
    RewriteCond %{QUERY_STRING} (thumbs?(_editor|open)?|tim(thumb)?)\.php [NC,OR]
    RewriteCond %{QUERY_STRING} ('|\")(.*)(drop|insert|md5|select|union) [NC]
    RewriteRule .* - [F]
    

    # 6G:[REQUEST METHOD]
    
    RewriteCond %{REQUEST_METHOD} ^(connect|debug|move|put|trace|track) [NC]
    RewriteRule .* - [F]
    

    # 6G:[REFERRERS]
    
    RewriteCond %{HTTP_REFERER} ([a-z0-9]{2000,}) [NC,OR]
    RewriteCond %{HTTP_REFERER} (semalt.com|todaperfeita) [NC]
    RewriteRule .* - [F]
    

    # 6G:[REQUEST STRINGS]
    
    RedirectMatch 403 (?i)([a-z0-9]{2000,})
    RedirectMatch 403 (?i)(https?|ftp|php):/
    RedirectMatch 403 (?i)(base64_encode)(.*)(\()
    RedirectMatch 403 (?i)(=\'|=\%27|/\'/?)\.
    RedirectMatch 403 (?i)/(\$(\&)?|\*|\"|\.|,|&|&?)/?$
    RedirectMatch 403 (?i)(\{0\}|\(/\(|\.\.\.|\+\+\+|\\"\\")
    RedirectMatch 403 (?i)(~|`||:|;|,|%|\|\s|\{|\}|\[|\]|\|)
    RedirectMatch 403 (?i)/(=|\$&|_mm|cgi-|etc/passwd|muieblack)
    RedirectMatch 403 (?i)(&pws=0|_vti_|\(null\)|\{\$itemURL\}|echo(.*)kae|etc/passwd|eval\(|self/environ)
    RedirectMatch 403 (?i)\.(aspx?|bash|bak?|cfg|cgi|dll|exe|git|hg|ini|jsp|log|mdb|out|sql|svn|swp|tar|rar|rdf)$
    RedirectMatch 403 (?i)/(^$|(wp-)?config|mobiquo|phpinfo|shell|sqlpatch|thumb|thumb_editor|thumbopen|timthumb|webshell)\.php
    

    # 6G:[USER AGENTS]
    
    SetEnvIfNoCase User-Agent ([a-z0-9]{2000,}) bad_bot
    SetEnvIfNoCase User-Agent (archive.org|binlar|casper|checkpriv|choppy|clshttp|cmsworld|diavol|dotbot|extract|feedfinder|flicky|g00g1e|harvest|heritrix|httrack|kmccrew|loader|miner|nikto|nutch|planetwork|postrank|purebot|pycurl|python|seekerspider|siclab|skygrid|sqlmap|sucker|turnit|vikspider|winhttp|xxxyy|youda|zmeu|zune) bad_bot

    # Apache 
    Order Allow,Deny
    Allow from all
    Deny from env=bad_bot
    

    # Apache >= 2.3
    
    
    Require all Granted
    Require not env bad_bot
    
    
    
    #AIOWPS_SIX_G_BLACKLIST_END
    #AIOWPS_BLOCK_SPAMBOTS_START
    
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} POST
    RewriteCond %{REQUEST_URI} ^(.*)?wp-comments-post\.php(.*)$
    RewriteCond %{HTTP_REFERER} !^http(s)?://danijelaenjoriskoken\.nl [NC,OR]
    RewriteCond %{HTTP_USER_AGENT} ^$
    RewriteRule .* http://127.0.0.1 [L]
    
    #AIOWPS_BLOCK_SPAMBOTS_END
    #AIOWPS_PREVENT_IMAGE_HOTLINKS_START
    
    RewriteEngine On
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g?|png)$ [NC]
    RewriteCond %{HTTP_REFERER} !^http(s)?://danijelaenjoriskoken\.nl [NC]
    RewriteRule \.(gif|jpe?g?|png)$ - [F,NC,L]
    
    #AIOWPS_PREVENT_IMAGE_HOTLINKS_END
    # END All In One WP Security

    # BEGIN WordPress
    
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    

    # END WordPress

Answer 1

User8230352 was correct in the characteristics (www versus non-www).

User8262086 was almost correct in rewrite rules.

The rewrite rules had to be:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.danijelaenjoriskoken\.nl [NC]
RewriteRule ^(.*)$ http://danijelaenjoriskoken.nl/$1 [L,R=301]

With these rules in the top of the file, the site is showing correct, due to the stripped url.

This solved the symptoms.

However, thanks to and inspired by the given answers, I disabled the module WP All in One Security, to find the root cause of the problem.

A bunch of code had disappeared from the .htaccess after disabling the module. I also deleted my own Rewrite Rules above. Now, WordPress did show images even with www-prefixed urls.

As I do want to have some spam protection, I activated the module again to test which setting is causing the problem... still looking... the .htaccess stays smooth and clean, just a few rules.

It seems that somehow the .htaccess was messed up so severly, or with contradictionary rules, the site wasn't able to coop with it.

Answer 2

I don't understand where the 'www' is coming from and I think that should be understood first. But as a last resort you could add

RewriteCond %{HTTP_HOST}   www\.danijelaenjoriskoken\.nl [NC]
RewriteRule ^/(.*)         http://danijelaenjoriskoken.nl/$1 [L,R]

This should rewrite www.danijelaenjoriskoken.nl to danijelaenjoriskoken.nl

Credit for this answer belongs to user8230352 who found the critical characteristic of this problem. I tried to add this as a comment but it would not format correctly.

Answer 3

The images from your site do not show on my machine either (Windows 10). The inspector is showing the following errors for the images:

Failed to load resource: the server responded with a status of 403 (Forbidden)

This sounds to me like a permission problem. Check the file permissions for these images. They should be 644.

Update:

Now I noticed that if I go to the site using www, the images do not work: http://www.danijelaenjoriskoken.nl/

But if I go to the website without www, the images work:

http://danijelaenjoriskoken.nl/

So I'm thinking that either the .htaccess file, some plugin or server has a "prevent hotlinking" feature enabled and this is the reason for the problem.

Update 2:

Also noticed, once I load the siter using http://danijelaenjoriskoken.nl/ and the images show, if I then load it again using www, the images just work and problem goes away.