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, media library was not showing preview of images though all images are actually available on the server. If you have the same issue, here are some solutions you can try to fix WordPress media library not showing images.

Check the Site with Developer Console

When you have the image problem, first open the site in browser 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 cases, 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.

You will not see the image previews when viewing in ‘Media > Library’ in WordPress admin panel.

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 images 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 other sites on the web and reproduce them on their site. When coming to images, they simply copy the original image URL from your site and link it on their site. Sometimes it could be for legitimate reason that people want to show details from your site. But the problem here is that 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 image’ in browser. 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.

• Click on it and ensure to disable on all your sites.

Check with your host and properly enable hotlinking option again if you need it. When enabling, you should add all your own sites in the exception list. It is good to add all versions of each site like http, https, www and non-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

The hotlink protection app maybe available in different location on your hosting server depending upon the company. For example, SiteGround uses Site Tools that helps you to setup protection on single site basis. Bluehost and many other companies use cPanel interface where you can find the app.

1.2. Disable Hotlinking in .htaccess

Basically enabling image hotlinking will setup directives in .htaccess file located in 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.

• Right click on the htaccess file and edit.

• Check and delete image hotlinking related entries. It should be something like below:

RewriteCond %{HTTP_REFERER} !^https://www.webnots.com$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

Note: When you enable image hotlinking, 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.

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.

• 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.

• 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 have correct permissions.
• Click ‘OK’ and check the file permission shows correctly.

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 the images are showing. Your site also should show the images normally without any issue.