The Best Themes For Elementor to Use on Your WordPress Site
March 29, 2023
Websites with a Green Color Palette That Look Amazing
March 29, 2023Troubleshooting 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.
Basic Debugging of WordPress Images Not Displaying
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.
Checking .php File Format
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.
Checking Media Folder Setup
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.
Checking Upload Process
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.
Fixing Image Hotlinking Issues
How to deactivate image hotlinking from cPanel
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.
2. How to deactivate image hotlinking in .htaccess
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 And Themes Issues
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.
Fixing File Permissions Issues
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.
FAQ about the WordPress images not displaying error
Why are my WordPress images not showing up on my website?
There could be more than one reason why your WordPress images aren't showing up on your website. It could be a problem with the image file itself, your WordPress theme or plugin, an incorrect file path or URL, a problem with the server, or a problem with caching. Steps like clearing your browser's cache, checking the type and size of the image file, and turning off plugins can help fix the problem.
How do I fix the issue of broken images in WordPress?
There are many things that can cause broken images in WordPress, such as wrong file paths, missing image files, or problems with your media library.
You can try to fix broken images by restoring missing files, making new thumbnails, or changing the URLs. If the problem keeps happening, you may need to get help from your hosting company or a WordPress developer.
Why are my WordPress images blurry or pixelated?
WordPress images can look blurry or pixelated if they aren't set up for web display or if they are too small or too big for the size they are meant to be shown.
To avoid this, make sure to optimize your images by resizing them, compressing them, and saving them in the right file format. You can also use plugins for WordPress like Smush to automatically optimize your images.
Why are my WordPress images taking a long time to load?
When images take too long to load, it can be frustrating for users and slow down the site. There are many things that could cause images to load slowly in WordPress, such as large file sizes, server problems, network problems, or images that haven't been optimized well. To fix this, you can use image compression plugins, change the way your image files are saved, or turn on caching to speed up the loading of images.
How do I ensure that my WordPress images are optimized for web display?
Follow these best practices to make sure your WordPress images are optimized for web display: use the right file format, compress and resize your images, use descriptive file names, and make sure your images match the design and branding of your website. You can also automate this process by using optimization plugins like ShortPixel or EWWW Image Optimizer.
Why are my WordPress images not responsive on mobile devices?
If your WordPress images don't look good on mobile devices, the problem could be with your theme or with the image itself.
You can try changing the CSS or HTML code to make sure the image looks good on all devices, or you can use a responsive image plugin to make the image size and resolution change automatically based on the size of the screen.
How can I troubleshoot WordPress image display issues?
Follow these steps to fix problems with how WordPress displays images: check for plugin conflicts, clear your browser's cache, turn off lazy loading, look for broken image links, regenerate thumbnails, or contact your hosting provider if the problem is with the server. If the problem keeps happening, you may need to ask a WordPress developer or a support group for help.
Why are some of my WordPress images displaying as question marks or blank boxes?
If your WordPress images show up as question marks or blank boxes, it could be because the file permissions are wrong, some files are missing, or the server is set up wrong. You can try to re-upload the images, check the file permissions, or get help from your hosting provider.
How can I prevent my WordPress images from getting distorted or stretched?
So that your WordPress images don't get stretched or distorted, you should only upload images that are the right size and resolution for how you want them to look. You can also use images that automatically adjust to the size of the device's screen, or you can resize the image without stretching or distorting it by using CSS.
How do I properly format and upload images to WordPress for optimal display?
Follow these guidelines to format and upload images to WordPress so that they look their best: use the right file format and compress the files.
Conclusion on WordPress images not displaying
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.
