Fix WordPress Media Library Not Showing Images Issue

It is difficult to understand the issue when it happens suddenly on your WordPress site. With more complex elements, troubleshooting a problem is one of the biggest headaches in running a WordPress site. Recently we have noticed, one of our sites has a strange issue that images could not be viewed on the site. Also the media library was not showing the preview of any of the images though all the images are actually available on the server. If you have the same issue hence here are some solutions you can try to fix WordPress media library not showing images issue.

Check the Site with Developer Console

When you have the image problem, first open the site and check whether you can view the images or not. If you can view the image on live site then the problem could be different. For example, you might have uploaded the images through FTP instead of uploading through Media Library in WordPress admin panel. All the images directly uploaded through FTP can’t be viewed in media library in admin panel. Check out the article on how to make the FTP image uploads visible in media library.

In some case, you will not see the images on the live site also. If this is your case then just right click on the image placeholder element showing as blank. Check the details on the developer console. It should show ‘Could not load the image’ as shown in the below picture.

Related:  Basics and Types of Weebly Apps
Image Could Not Be Loaded in Firefox
Image Could Not Be Loaded in Firefox

You will not the image previews when you view the images under ‘Media > Library’ in WordPress admin panel.

No Image Previews Showing in Media Library
No Image Previews Showing in Media Library

How to Fix WordPress Media Library Not Showing Images Issue?

Now that you can understand the images are not loading due to some restriction or problem. The problem stops the image loading on the site both backend as well as on the frontend. Follow the below solutions to fix the problem:

  • Disable hotlinking feature
  • Check and change file permission of uploads folder

1. Disable Image Hotlinking

1.1. Disable Image Hotlinking from cPanel

There are many site owners simply scrap the content from many other sites on the web and reproduce them on their site. When coming to images, they simply copy the image original image URL from your server and link it on their site. Sometimes it could be for legitimate reason also that people want to show some details from your site. But the problem here is that the images loaded on other’s sites also consume your own server’s bandwidth.

In order to avoid others using your server resources, hosting companies allow you to protect the images using ‘hotlinking’ process. This helps site owners to allow loading of images only from the sites they permit. If you have recently enabled hotlinking that could cause the error could not load images. Because you might have wrongly enabled hotlinking on your own site. This happens especially when you host multiple sites on the same hosting account. Follow the below process to disable image hotlinking on your site:

  • Login to your hosting cPanel or similar account.
  • Search for ‘hotlinking’ option.
Related:  Review of Weebly SEO Features
Image Hotlinking Option in Bluehost cPanel
Image Hotlinking Option in Bluehost cPanel
  • Click on it and ensure to disable on all your sites.
Disable Hotlink Protection
Disable Hotlink Protection

Check with your host and properly enable hotlinking option again if you need. You should add all your sites in the exception list. It is good to add all versions of each site like http, https, www and no www versions. Below is an example for your reference; you should add all the versions of all sites hosted on your account to exempt from hotlinking.

  • https://www.webnots.com
  • https://www.webnots.com
  • https://webnots.com
  • https://webnots.com
1.2. Disable Hotlinking in .htaccess

Basically enabling image hotlinking will setup directives in .htaccess file located on the root of your site. So it is also possible to enable image hotlinking by adding entries in htaccess file directly or using plugins. Generally most of the security plugins offer image hotlinking function. If you have enabled such function, disable it and check the images are loading on your site.

Follow the below instructions to disable image hotlinking in htaccess file:

  • Log in to your FTP account using FileZilla or any other FTP client software.
  • Navigate to the site’s root directory, generally it is ‘/public_html/.
  • Look for .htaccess file. Sometimes your FTP software may not show the files starting with dot. So ensure to enable viewing hidden files option.
Showing Hidden Files in FileZilla
Showing Hidden Files in FileZilla
  • Right click on the htaccess file and edit.
Edit .htaccess File with FileZilla
Edit .htaccess File with FileZilla
  • Check and delete image hotlinking related entries. It should be something like below:
RewriteCond %{HTTP_REFERER} !^https://www.webnots.com$ 
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - 

When you have enabled image hotlinking then none of your social profiles will show featured images of the shared post content. This is a good indication that your server blocks the images from loading.

Related:  How to Fix Webcam Issues in Windows 10?

2. Check File Permissions

The other solution is to check and fix the file permissions of the image upload directory. WordPress controls the visibility of a file based on the permission set for the folder in which it is stored. When someone changed the file permission, you can’t view the images in media library. Follow the below instructions to reset the file permission:

  • Log in to your FTP account.
  • Navigate to ‘/wp-content/’ directory and check for ‘uploads’ directory. If you have changed the image upload folder then you should look for that folder on your server.
  • Drag the horizontal scroll bar on the FTP software and check the file permission of that image upload folder and the images inside the folder.
  • Generally the ‘Permissions’ should be showing as ‘0644’ or ‘0755’ and the ‘Owner/Group’ should show ‘505/503’ as shown below.
Set File Permissions in FTP
Set File Permissions in FTP
  • If you see it is different, then right click on the uploads folder and choose ‘Permissions’.
  • In the popup dialog box set the permissions to 0644 or 0755.
Setting File Permissions in FileZilla
Setting File Permissions in FileZilla
  • Ensure to select the checkbox saying ‘Recurse into subdirectories’ and choose ‘Apply to all files and directories’ option. This will ensure all image files inside the ‘uploads’ folder will have correct permissions.
  • Click ‘OK’ and check the file permission shows correctly.
File Permission Settings
File Permission Settings

Note, in our case we have images in ‘media’ directory hosted outside ‘/wp-content/uploads/’ directory. You should change the file permissions of your images directory which should be ‘/wp-content/uploads/’.

Now open the media library and check that the images are shown. Your site also should show the images normally without any issue.

Media Library Showing Images
Media Library Showing Images
Recommended Articles:

3 thoughts on “Fix WordPress Media Library Not Showing Images Issue”

  1. I have a similar sutuation of one of my blof. All was OK in 2019, from 2020 I can’t upload any image. The icon in media library is grey, link to image returns 404. Can’t find a solution how to fix it.

    Reply
  2. Thanks for the info – I have not experienced (nor heard of) this issue until today. It happened with a personal site. I suspect one of the latest WP updates is the villain (Gutenberg editor).

    I checked permissions and made a few changes. Images previously were generating a 403/forbiudden error. Images are once again visible on the site and in the media library but still will not display in media library grid view.

    I know a plugin is not the culprit. I disabled all just to troubleshoot and none seemed to be causing the issue.

    Reply

Leave a Comment