Images are not loaded on Google Chrome browser, SSL issue?
-
Hi
A client for whom I work reported today that all of a sudden the images of his WooCommerce shop are not showing up on the homepage.
After looking into this matter we discovered that images do show up on other browsers but not on Google Chrome. It seems that only Google Chrome all of a sudden has problems loading the images of his website.
Starting to research into this, I found that the image tags have a link to
https://www.w3.org/...
assrc
attribute and that the real link of the image file is located in thedata-src
attribute. The reason for this is because of lazy loading the images on the website.On this forum I found posts about it here:
After update NO more images are displayed!or here:
Lazy Loading in combination with the official amp plugin images not loadingBut I do not think it’s a problem with your plugin, I think it’s rather a problem with the outdated
<svg>
link which you use for the placeholder image. Therefore I would like to propose a suggestion to you:You use the following content for the
src
attribute of lazy-load<img>
tags:
data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%20324%20324'%3E%3C/svg%3E
It’s meant to be a placeholder for images that are marked to be lazy loaded. However, this content links to the w3.org website via ordinary
https://
protocol, nothttps://
protocol. The website which has the problems runs onhttps://
.When a website is set up for SSL communication all links in the source code have to be
https://
protocol. If links are detected that load content viahttps://
protocol the website is downgraded as “not secure”. This seems to be the reason why the loading of images fails in Google Chrome browser as soon as it finds images which have ahttps://
link in theirsrc
attribute. Prior to that, the few images not marked for lazy-loading, are being loaded in Chrome.Servers have different configurations via .htaccess how to handle SSL traffic. Furthermore you’ll have different behavior among the various browsers how to handle such conflicts. Maybe these circumstances culminate and cause the Google Chrome browser to abort loading images as soon as it finds the first lazy-load image which contains a
https://
link in itssrc
attribute because of the outdated w3.org<svg>
tag.And concerning other browsers loading the images, well, the other browsers may be smart enough to recognize and consider the
<svg>
link to w3.org as trustworthy and not downgrade the whole website as “not secure” just because of some outdated w3.orghttps://
placeholder links in<img>
tags.If my assumption is correct you could solve this problem very easily. Simply update the
<svg>
link in the lazy-load<img>
tags. You could replace this:
xmlns='https://www.w3.org/2000/...
with this:
xmlns='//www.w3.org/2000/...
This notation should avoid any SSL conflict with .htaccess configurations on production servers, since you can not predict all the different server scenarios, and it lets the server of w3.org decide how to handle the
HTTP
protocol for the placeholder image.—
If this problem is already known and has been addressed then ignore this post and close it.
Otherwise please let me know if my suggestion is helpful to you.
Thank you for a good plugin.
Sincerely,
Gevorg
- The topic ‘Images are not loaded on Google Chrome browser, SSL issue?’ is closed to new replies.