Wordpress SSL causes 404 for images

After installing first a self-signed SSL certificate (replaced with a free Comodo SSL certificate in order to troubleshoot this problem) I installed Wordpress and started building a WooCommerce-based store. Because I'd installed Wordpress on the https:// site, the Settings > General screen automatically configured the site address as https://

All was going well apart from a niggling problem with images not displaying on the site itself (anonymously) or logged into the WP dashboard. Inspecting the image HTML in Chrome allowed me to extract the full problem URL and I found I could load the image successfully in its own window. Chrome also allowed flagged the 404 response for images when loaded through the Wordpress page. Weird.

Apart from images I uploaded to the Media library, other images being served locally from my Wordpress installation (e.g. theme thumbnails) were also failing to load.

I found that by changing the site address (again in WP > Settings > General) to http:// (not https://) the images would display so I came to believe the problem was somehow related to SSL. Interestingly, after changing this setting, the images appeared when I browsed to either the http:// or https:// site. Images on the http:// site using absolute image references to the https:// site also worked.

After a bit of head scratching and a bit of searching around (this problem doesn't seem to be particularly common), I came across this page which suggests hotlink protection can cause problems for the SSL protocol. Apparently "HTTPS is configured correctly when resources that are available via HTTP are also available via HTTPS." As far I could tell, my images were available through both HTTP and HTTPS but I had enabled hotlink protection on the site before installing Wordpress.

Sure enough, disabling hotlink protection solved the problem.