How To Fix WordPress Media Library Showing Blank Image Thumbnails?

If you are facing issues with WordPress Media Library where you are seeing blank image thumbnails or Media Library is not loading thumbnails, then in this post we shall see some troubleshooting steps and solutions on how to fix WordPress media library showing blank image thumbnails. When this happens, even the images and featured images on the posts may also be rendering blank images.

 

When we encountered this particular problem, none of the images are rendering on the posts published. In the WordPress media library, all the images were showing blank thumbnails. However, when the uploads directory is checked via FTP or using the hosting control panel’s File Manager, all the images are there and the images can be view just fine. So, the images files aren’t lost. The problem is something else which needed troubleshooting.

If WordPress Media Library is loading but not showing images, there are two primary causes: an incompatible plugin, and improper file permissions.

Troubleshooting Steps To Resolve WordPress Media Library Showing Blank Image Thumbnails

1) Ensure WordPress Core, Themes and WordPress plugins are updated and running on the latest version

Start by ensuring that all your files are up to date, and that the WordPress website is running on the most recent version of WordPress. Also, ensure that all the activated WordPress plugins are also updated.

2) Deactivate all the plugins and activate one by one

• Deactivate all the active plugins, then check the thumbnails in the WordPress Media Library.
• If the issue is resolved by deactivating all the plugins, then the problem is because of one of the plugins.
• Try reactivating them one at a time, and check the Media Library in between till you find out which plugin is causing the issue.
• If you find the plugin that is causing the issue, then the next steps could be to
  1) Remove the plugin if it is not essential, OR
  2) Rollback to a previous version if it was working well earlier (See here how to rollback WordPress Plugin Update to previous version),
  OR 3) Find an alternative plugin which will serve the same purpose.

NOTE: It is advisable to take a backup of the WordPress database just in case we mess up something in the process.

However, if the blank thumbnails in WordPress Media Library is still unresolved even after the above troubleshooting, then it’s not because of the plugins.

3) Run WordPress Site Health Check

WordPress Site Health is now a part of WordPress core. Starting from WordPress 5.2, WordPress introduced a brand-new feature called Site Health. This tool monitors the health of your site and checks on your WordPress installation to detect common configuration errors and known issues. It also notifies of any issues or improvements to make.

You can find the Site Health tool via Tools > Site Health in your WordPress backend.

While some of the recommendations may not be totally under your control, such as ‘outdated SQL server’ which need to be upgraded from the service provider end, the Site Health tool will inform if there are file permission issues and other configuration issues.

Run the Site Health tool and see if there are any issues reported and if those can be rectified from your end.

4) Verified permissions of the WordPress uploads directory

If your website was working well earlier, then it is not expected that the permission of the uploads directory would change. However, just confirm if there has been changes in the permissions of the upload directory and the folders within.

Images / Files we attach to WordPress posts are located at /YourSite/wp-content/uploads/ directory.

To understand WordPress file permissions, refer this article.

In short, the recommended file permissions for WordPress files and directories are:

• folders / directories: 755
• files: 644

wp-content: 755

• The correct permission for WordPress for wp-content folder will be 755 and it is mandatory that the files within the folder has 644.

wp-content/uploads: 755

• Folders inside wp-content/uploads should also have permission 755.
• Files inside wp-content/uploads or any under any of its folders should have 644.

Also see: How to change file permission of WordPress folders using CPanel or FTP?

5) Switched to different theme.

Next, troubleshoot by switching theme to the default themes that comes along with WordPress such as TwentyTwenty or TwentyTwentyOne etc.

 

UPDATE (RESOLVED):
Blank image in WordPress Media Library due to Firefox browser AdBlocker Ad-on

• After trying all the probable solutions discussed above, the issue still persisted.
• It was later found that Firefox AdBlocker Add-on was the cause for the blank images in WordPress Media Library.
• If the Firefox AdBlocker Add-on is enabled, there are blank images in WordPress Media Library.
• If the Firefox AdBlocker Add-on s disabled, the images are correctly displayed in the WordPress Media Library.
• See screenshots below.
• So if you have an AdBlocker add-on installed in your web browser, try with the AdBlocker disabled.

UPDATE (RESOLVED):
Blank Images in WordPress Media Library due to conflict in settings set by Plugins

In one such issue, it was found that WordPress Media Library was not showing thumbnails because of conflict in settings set by a security plugin.

The scenario in this case was that, the WordPress website was cloned from a staging environment to production environment.  The site included a Security plugin – All In One WordPress Security and Firewall Plugin, wherein, hotlinking was prohibited in the Firewall settings of the plugin. Such settings writes some directives to the site’s .htaccess file.

When the site was cloned to the production server, everything else was working fine, except the blank images in the WordPress Media Library.

A Hotlink is where someone displays an image on their site which is actually located on your site by using a direct link to the source of the image on your server.  Due to the fact that the image being displayed on the other person’s site is actually coming from your server, this can cause leakage of bandwidth and resources because the image is actually served from your server.

Troubleshooting to find the problem:

• Checked WordPress Core, Themes and Plugins are up-to-date.
• Disabled all WordPress Plugins – WordPress Media Library started to show images.
• Enabled Plugins one by one and confirmed the issue is because of the plugin -“All In One WordPress Security and Firewall Plugin”
• Checked configuration of the ‘All In One WordPress Security and Firewall Plugin’ step by step and zeroed in to the problem – Hotlinking set in the Firewall Settings of the plugin.

Solution:

• WordPress Backend > WP Security > Firewall > Prevent Hotlinks
• Disabled / Unchecked ‘Prevent Image Hotlinking’ > Save Settings – WordPress Media Library thumbnails reappeared
• Re-enabled / Checked ‘Prevent Image Hotlinking’ > Save Settings -WordPress Media Library still showing thumbnails.

After disabling and re-enabling the ‘Prevent Image Hotlinking’ in the Firewall settings of ‘All In One WordPress Security and Firewall Plugin’, thumbnails reappeared in the WordPress Media Library and images also started to show the featured images and other images attached to posts.

If you are facing a similar issue especially after moving files from one server to another, you may follow the troubleshooting steps mentioned above and also check ‘hotlink’ configurations in security / firewall plugins if you are using such plugins.

All-In-One Security (AIOS) – Security and Firewall

 

Related Useful Plugins:

Velvet Blues Update URLs for updating URLs after moving WordPress website to a new domain name. This plugin helps in updating internal links to pages and references to images etc.

Velvet Blues Update URLs