Skip to Main Content

Your images do not display with SSL? Here's the solution

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Before we talk about SSL preventing your images from being displayed, we'll provide some background first.

When it comes to the connection between the human senses and marketing, vision seems to be the most influential. According to the Rules of the Brain by John Medina, the following results from the test of the power of the recall.

When people are given information to listen to, they remember about 10% of what they heard 3 days ago. But when people received information next to a picture, they remember about 65% of what they received three days later. Your images do not display ssl here is solution

Research has shown that people's willingness to read increases by 80% when text is associated with colored images. As a publisher or distributor, it is important for you to see not only that website visitors get remember what they saw, but actually take the time to read it.

So if images are so important to your strategy global marketing, what will you do if you discover that the images on your website are no longer displayed?

If you have recently updated WordPress, maybe you have already encountered this problem.

But before, if you have never installed WordPress discover How to install a WordPress theme et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

SSL prevents display of images

While not just relegated to the recent WordPress update, there have been a number of issues reported regarding image display issues:

All images on the website are no longer showing  : After updating WordPress, no image is displayed.

The images in the media library are gone : After updating WordPress, the media library and all associated images appear to be missing.

Dashboard images are invisible : After updating WordPress, the images on the website seem to work, but the thumbnails on the products page are not displayed.

A mixed content warning appeared After installing an SSL certificate, a security warning about mixed content appeared.

The importance of website security

Many companies Nowadays  have an eCommerce website, in order to process transactions involving sensitive customer information, these businesses need to be able to prove to their customers that they have a better way of ensuring that data remains secure.  

Go further in security by discovering How to secure more WordPress with your smartphone

SSL: To the Rescue

The most common way to do this is by purchasing a certificate Secure Sockets Layer (SSL). This certificate allows visitors to decide whether or not it is safe to continue a purchase on a website. If a website is considered dangerous because of the mixed contentusers will receive a warning that will discourage them (necessarily). 

And this is how SSL is supposed to work. It acts as a barrier guard between your connection and your customers, using a set of keys (a string of numbers). Clients' browsers or devices tend to receive a public key. Your website will then receive a private key.

The one that connects the two is a session key and it is this key that encrypts and decrypts the data that is transmitted in both directions.

HTTPS: The missing link

Now, with the SSL certificate in place, the other component of a secure website comes in the form of HTTPS version " secure Of the Hypertext Transfer Protocol. HTTPS is responsible for transporting data between two points and it does so using SSL.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

See also How to replace image links after installing SSL on WordPress

For websites that don't need confidential customer information, HTTP works great. But for those who need that extra level of security, HTTPS is a “must”. (And as if that was not enough, Google rewards websites with better search rankings that use the HTTPS protocol.)

twitter-https demo

Correct the bug

By now you probably know that there is something going on with your SSL and HTTPS due to a update of WordPress. Once the developers started digging into all of these reported issues, they were able to identify the root cause as stemming from the introduction of the mixed content.

What is mixed content?

Most websites have local content and external content. Local content can be the code of your website and locally stored images and images, videos, style sheets and scripts can be obtained from elsewhere.

Discover How to put your WordPress website in Maintenance mode

ie-security warning

Mixed content is a problem that occurs when a website offers content that is obtained from secure (HTTPS) and non-secure (HTTP) sources.

Consult How to Add a Custom Navigation Menu to WordPress

Often, a website with SSL protection and an URL HTTPS loads some of its content (images, style sheets or scripts) from a place not protected by SSL.

How to remove mixed content

SSL is preventing images from showing on your website, but you are not sure what to do about it, since the issue arose with your update, Going back to an old WordPress version is not the solution. There are a number of solutions you can explore.

Solution # 1: Install Really Simple SSL WordPress Plugin

If you don't already have it, this plugin is the best place to start. Really Simple SSL automatically detects your settings and configures your website to run over HTTPS.

To keep it light, the options are kept to a minimum. The entire website will switch to SSL.

Solution # 2: Examine the URLs on the dashboard

adjustment url wordpress

The next place to go is your WordPress dashboard. Click on  Settings> General.

Check that all your URLs do not use "HTTP".

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Solution # 3: Examine the code

website source code

Open your website. Open the source code of the page that has an absent image. Then do Ctrl + F to search the code. Paste the text src = http In the search area.

You should find that the image links missing on this page have HTTP instead of HTTPS. Go to WordPress and fix the specific instances requiring an update.

Solution # 4: Investigate the WordPress Theme

If you use a third-party WordPress theme on your website, it can use absolute URLs rather than relative URLs. Review the PHP files for your theme to check the automatic tuning.

If you are dealing with absolute URLs, you will need to find a way around this by using coding or custom plugins. This also applies to plugins.

Solution # 5: Study Broken Links

There are a variety of tools that can help you quickly and easily check the links on your website: Google Webmaster Tools ou Screaming Frog SEO Spider.

Some will allow you to quickly transition from HTTP to HTTPS, while others will allow you to update relative paths so that you no longer have problems.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WooCommerce Extra Product Options

WooCommerce Extra Product Options is a WordPress extension that will allow you to create additional product options with support for conditional logic. You will also be able to create forms, convert attribute dropdowns to radio buttons and more.

Woocommerce extra product options

Among its features we will find among others: the psupport for multiple types of fields, the cprices according to the selected fields, the visual constructor of the form fields, the support of shortcodes, the possibility ofactivate its options for specific roles, thechoice between the increase on fixed prices or as a percentage, the support of theconditional logic on fields and sections in the form constructor, theompatibility with several plugins and eCommerce extensions, a DDetailed documentation, import / export of features to other forms, the ability to hide or display prices, and Much more …

Download | Demo | Web hosting

2. Click to WhatsApp Chat

The WordPress Click to WhatsApp Chat plugin allows WordPress customers to easily connect with the website owner or customer support using their WhatsApp account.  Click to whatsapp chat for wordpress

This plugin requires the WhatsApp number and time and day, which the website owner or support team will use to discuss. Chat button can be added on the product detail page WooCommerce, which is directly related to this product.

Just a click on the WhatsApp account and it will be directed directly to the mobile WhatsApp account with a default message. And if the client is on desktop or laptop, he will be redirected to WhatsApp Web.

Download | Demo | Web hosting

3. Bpchat

Bpchat is a WordPress extension of BuddyPress that sets up a chat system on your blog or WordPress website.

Wordpress buddypress users chat plugin

Once this plugin is installed on any blog, forum, community, directory, e-commerce website or social website BuddyPress, all connected users can automatically chat instantly.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Ce WordPress plugin also sets up an easy way to chat online, which looks a bit like what Facebook offers.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's all for this tutorial, I hope it will help you fix the problem of displaying images with the HTTPS protocol. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

... 

This article features 6 comments

  1. Hello,
    Thank you for these explanations which made it possible to solve my problem.
    Image thumbnails no longer displayed in the media library. Solution # 2 made everything back to normal, we had to replace http by https in the site addresses.

  2. Hello, I'm trying to get the ssl plugin to work with the plugin, I'm not sure what the name is, but the credit was on you anyway… For 2 days I tried to install it safely. the plugin is Really Simple SSL. Thank you thank you, I will bookmark this site.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
11 shares
Share10
tweet1
Save