Troubleshooting in WordPress can be tedious. Without an easy guide to follow, users spend hours trying to fix the issues.
It can be the same case with the WordPress images not displaying errors.
Sometimes users can't see the thumbnail of the uploaded image in the Media Library. Other times, the pictures are not loading properly on the live site.
The right way to fix these errors depends on the exact issue. The solution can be easy and quick.
But in some cases, it involves checking a few different things to identify the problem.
This article lists the most common reasons for the WordPress images not displaying error. It also outlines how to fix them.
The first step is to check if you're using the latest version of WordPress. Reportedly, there were some technical issues linked to this error in the 3.9.1 version.
It is equally important to ensure that all the plugins are up to date. It's a simple step, but downloading the most recent update can fix the issue with images not showing.
If downloading a new version of WordPress, make sure to create a full backup first. Then start with updating the core files, followed by the plugins.
After completing the update, check if the problem with images not displaying is still occurring.
Adding images the wrong way may be the reason why they're not showing in the Media Library.
If uploaded through the WordPress dashboard, the pictures will appear in the Media Library. But if uploaded via FTP, the WordPress Media Library won’t display them.
Other times, images aren't loading on the live site. To inspect the problem, use the Developer tools in Chrome.
Right-click on the inactive link on your site. On the DevTools a message appears saying ‘Could not load the image’.
The Developer console can help users to diagnose the problem of missing images on their live site. In case of this error, the thumbnail won't appear in the WordPress Media Library either.
The WordPress images not displaying error may appear due to a wrong .php file format. So, before taking any further steps, inspect this possibility.
Use the cPanel to check the encoding or use an encoding function through a Linux command. The recommended format of the .php file is utf-8.
Another quick way to find a possible source of the error is to check the setup of the media folder. It should be: /wp-content/uploads folder.
The uploads folder stores all the media for your WordPress site, including images. The picture you’re trying to upload should be in this folder too.
If the setup is different, it may cause the ‘image not displaying’ error.
Uploading images the right way ensures that they will display properly. So, check if the picture is correctly linked in the HTML and that it is stored in the right folder.
Here is a summary of this first part.
Before starting any more complex troubleshooting, perform a few basic debugging checks. Go and see if there are any new updates available, backup your site, and download the new versions.
Make sure to upload the image through the WordPress dashboard. This should display the image preview in the Media Library.
If the picture isn’t loading on the live site, use the DevTools console to diagnose the problem. Finally, check the .php file format, Media folder setup, and upload process.
If nothing has resolved the issue, try the following solutions.
Image hotlinking has become popular. There are web owners who do it the right and legitimate way, but in some cases, it's an unfair practice.
Hotlinking displays an image somewhere else on the internet by a direct link. This is instead of downloading it and hosting it.
The page that hosts the picture uses its own bandwidth to display the media on the other linked sites.
It's an unfair practice when developers abuse the bandwidth of another site. Hotlink protection is a way to prevent this from happening.
When activated, other web users cannot hotlink elements from your site. Unless, of course, they receive permission to do so.
One common source of the WordPress images not displaying error is the wrong configuration of hotlinking. If you have recently enabled hotlinking, follow the recommended steps below.
To deactivate image hotlinking on your site:
1. Open your hosting account (e.g. cPanel).
2. In the Security settings find the Hotlink protection.
3. If it's enabled, deactivate it on all your sites.
To activate the hotlink protection again, make sure to configure it correctly. List the URLs to which you want to allow access.
Add all your sites, and all their versions including http, https, www, and non-www. The protected domain will appear under the Allowed Referrers on the confirmation page.
When set up the right way, there shouldn't be any more problems with the image display.
Some hosting servers offer the hotlink protection app.
Another way to deactivate the hotlink protection is by editing the .htaccess file.
.htaccess file is a configuration file that the server uses to read your commands. It's located in the root directory of your site.
Most security plugins come with hotlink protection. Check the security plugin and if it’s currently using image hotlinking, deactivate it.
Then try to reload the featured image.
To deactivate hotlink protection in the .htaccess file, here are the steps:
1. Connect to the FTP client.
2. Go to the root directory, usually ‘/public_html/'.
3. Find the .htaccess file. If it isn’t visible, enable viewing hidden files.
In FileZilla, it's under the Server tab/Force showing hidden files.
4. Right-click on the .htaccess file and choose Edit.
5. Check and delete entries related to image hotlinking.
There's a way to verify if it's the server setup preventing the image from displaying. If using hotlink protection, you can’t load featured images in the post content of your social sharing.
If image hotlinking wasn’t the cause of the error, try checking the plugins and themes.
Plugins or themes are sometimes incompatible with a WordPress website. This can be the source of the image not displaying error.
WordPress plugins are usually safe. But the poor coding of some third-party free plugins can clash with the Media Library function.
It's best to disable all the plugins first to check if the problem disappears. Next, try to identify which plugin is causing the error.
Here are the instructions:
1. Go to the WordPress dashboard.
2. On the main menu on the left, select Plugins.
3. Click on Installed Plugins.
4. Choose the checkbox to select all plugins. Click on Deactivate from the Bulk Actions drop-down menu.
5. Apply the changes and check if the Media Library is working now.
To identify which plugin is faulty, reactivate them one by one until the error reoccurs. Having found the plugin, contact the developer for help or find a different plugin.
The active theme can also trigger the error of WordPress images not displaying. To test if that's the case, follow these steps:
1. Open the WordPress dashboard.
2. Choose Appearance in the menu on the left.
3. Click on Themes.
4. Use the Add New option and for testing purposes download a different theme, such as “Twenty Twenty”.
5. Go back to Appearance/ Themes and activate the new theme.
6. Check if the Media Library is working now.
7. If the theme is not compatible, contact the theme developer.
File permissions define which user can read, write, and execute the files that make up your WordPress site. A correct setup prevents unauthorized users from editing and harming the content.
But if someone has changed the permissions, this may prevent you from seeing the images uploaded in the WordPress Media Library.
To reset the permissions configuration, follow these steps:
1. Log in to your FTP manager.
2. Go to wp-content in FileZilla.
3. Locate the /uploads/ folder and right-click on it.
4. Choose File permissions and set the Numeric value to 744. Tick the box for Recurse into subdirectories, and select Apply to directories only.
This configuration grants Read access to everyone. But it limits the Write and Execute access to only you.
5. Apply the changes by clicking on OK.
6. Return to the /uploads/ folder and right-click on it again.
Choose File permissions again, but set the Numeric value to 644. Tick the box for Recurse into subdirectories, and select Apply to files only.
This setup ensures that nobody gets Execute access to files.
This should enable you to view the content of the WordPress Media Library page again.
WordPress users experiencing problems with image preview in the Media Library can find many useful tips in this article. It also outlines solutions for the error of images not displaying on the live site.
The troubleshooting will depend on the exact issue.
There could be a plugin conflict. Themes and hotlinking can also cause problems.
Sometimes the problem lies with WordPress settings. You may have to set up correct permissions to see the images inside the Media Library.
If you enjoyed reading this article on WordPress images not displaying, you should check out this one about WordPress add media button not working error.
We also wrote about a few related subjects like failed to open stream error, WordPress post missed schedule, failed to load resource error, WordPress posting to Facebook done automatically, Wordpress mixed content errors, how to reorder pages in WordPress and WordPress updating failed error.
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.