Purchasing and installing an SSL certificate is a commonly adopted security method for most business sites and other sites that collect customers’ information. Nowadays, SSL not only delivers a sense of security, but also contributes to search rankings in Google.
However, if not configured properly, SSL could easily cause some errors on your site. For example, as you have come here, you have probably secured your WordPress site with SSL but met the trouble that some or all images do not display properly. At the same time, you, and your site visitors, begin receiving warning messages from web browsers saying that there is mixed content or insecure content loaded.
You are not alone because we have seen many people reporting the image display issue. The cause of this issue, then, is exactly the mixed content that leads to the insecurity.
In below, we will show you what mixed content is first, and then introduce several optional fixes for the WordPress images not showing issue caused by mixed content. You may need to combine two or more of the solutions to fix all your problems.
What Is Mixed Content?
When a webpage is secured using HTTPS, the connections to it are encrypted by SSL and are identified to be secure. However, when there is something wrong, the page may also include content loaded through an HTTP connection instead of HTTPS.
In this case, this page is considered to be with mixed content. When it is loaded in a web browser, a warning message will appear telling insecure content is delivered and asking whether the visitor is willing to continue reading the page or not.
With such a warning message showing up frequently to your visitors, it seems that you will soon suffer from a loss of website traffic, and no one will submit a form on your site that asks for personal information.
If your images are broken on a page where the warning appears, those images could be one of the reasons that cause the mixed content issue. It’s certain that you are not loading any image using HTTP actively since you want to secure your site with SSL, so the problem should be inside WordPress. For example, WordPress might have been falsely configured to force HTTP onto your images.
In order to make your images work, you have to remove the mixed content. In general, this is about finding the HTTP links in your website code and updating them to HTTPS.
Below are some of the solutions you can refer to when meeting the images not showing issue in connection with mixed content. With some of the solutions, you may also be able to fix the insecure scripts, iframes or some other issues.
Solution 1: Modify Your Site URL Settings
If you want to force all WordPress pages to use HTTPS, you can fix the mixed content issue quickly by going to Settings > General in the admin area and modifying the “WordPress Address” and “Site Address”. In the case the URLs are not enhanced by SSL, simply change them from HTTP to HTTPS.
This is the simplest option to enforce HTTPS. However, it may not be the right solution for you because loading all pages via HTTPS will result in slower speed as caching is not enabled. So if you only want to use HTTPS for some certain pages, for example, those with forms, you’d better choose another solution.
Solution 2: Fix Insecure Content with a Plugin
When the former solution is not suitable for you, don’t worry. There is still a simple and time-saving method for removing the mixed content – to use the SSL Insecure Content Fixer plugin. Rated 4.9 stars in the WordPress plugin directory, this plugin is specially designed for cleaning up insecure content warnings without many manual efforts.
As soon as you have installed the plugin, find it under the Settings menu, and select the “Simple” fix to run. Also, you can choose other fix levels if you have the needs. Once the plugin is set up, it starts performing fixes automatically. After a while, check a page with broken images, and you should now find it works fine. The insecure content warning is gone.
If you are experiencing redirect loops while securing your WordPress site with the free Flexible SSL offered by CloudFlare, a better fix would be the CloudFlare Flexible SSL plugin. You can visit the plugin’s details page to get more information.
Solution 3: Investigate Code Manually
When you see broken images on a page, you can investigate the code manually to see whether those images are served via HTTP. To do this, follow the simple steps below.
- Open the page with broken images.
- Right click anywhere and select “View page source”. The name of the option may vary depending on the browser you use, but the word “source” is certainly included.
- Begin a search with “CTRL+F”.
- Enter src=”http in the search box and browse through the results to find the image links starting with HTTP instead of HTTPS.
After finding those images that are not properly loaded, try editing the post or page and utilizing relative URLs. If this doesn’t fix the issue, you may need to re-upload the images and then replace the old insecure image links with the new ones.
When the image not showing issue is fixed on one page, you also have to check other pages on your site for the issue and fix them as soon as possible. This may take some time.
Solution 4: Use an Online Checker
If you have used a large number of images in your WordPress posts and pages, checking the source code manually is time-consuming, and you may miss out some errors accidently. To improve the efficiency, you can use Why No Padlock, an online insecure content checker.
Solution 5: Check Your Theme
If you have recently changed your website theme before seeing broken images, the cause might be that the theme is using absolute URLs instead of relative URLs in the theme files. For example, it might be hard-coded to load an image file from http://domain.com/wp-content/themes/theme-name/images/background.png.
In this case, you should first think carefully whether you really need the theme. If you don’t want to check and modify the theme files, you can change another theme directly.
If you want to keep the theme, one of the solutions is to report the issue to the theme developer who may release an update later which fixes the issue. Or you can locate the problematic images in the theme files and fix them manually by performing manual code check, which is a little advanced and energy-consuming.
Solution 6: Check Your Plugins
A plugin that is not coded properly may also override your site-wide HTTPS settings and cause WordPress images not showing up. If you could remember when the problem begins, try deactivating the plugins installed around the time to see whether the problem disappears. If this works, activate the plugins again one by one to find the problematic one.
In the case you have completely no clue about which plugin is not working alright, deactivate all your plugins one by one and check a page with broken images each time a plugin is deactivated until the “bad” one is figured out.
If it is true that a plugin is causing the mixed content problem, you can select a solution from the following options.
- Delete the plugin if there is a good alternative available.
- Keep the plugin deactivated, report the issue to the plugin developer, and then wait for the update in which the HTTP issue is fixed.
- Fix the plugin by yourself and then share the solution with other users or the developer. However, as this might be complicated, we don’t recommend it if you don’t really know what you are doing.
Both the broken images and mixed content have negative effects on the user experience and your users’ trust in you. So once you find any content problem caused by SSL, work hard to fix it as soon as possible. Also, after resolving the issue on a single page, keep browsing more pages to make sure you are not leaving out other errors.