I am experiencing some odd behavior with my in-development storefront that is quite odd: sometimes, the images in my header and in my home page's main body disappears.
These images are selected by the storekeeper in the related section files that I wrote. More specifically, I setup a section file with an image in one of the settings which I then reference in an <img> element in section's liquid code.
Of course, an image must first be selected in the Shopify Admin before it will appear in the homepage. And of course, the store keeper must click on the 'Save' button on the Shopify Admin for the selection to stick.
It might not be you. Shopify has been migrating some server stuff which for me has produced huge slowdowns in the theme customizer and admin etc, and on occasion certain cdn files taking forever to load, which could result in a timeout and no image loading. Not saying that's it, but it's a possibility. Look at your code in the browser and make sure it looks correct, and that the file it's pointing to is really 'there', and then if so... and its not loading... there's gotta be some server issues.
Thanks for the replying, Paul_West. I didn't think to look at the page in Chrome dev to see what the src attribute in the <image> element is pointing to when the bug occurs. If the src is pointing to a CDN, that means the CDN server is mucked up. If the src is blank, it means the Shopify database got mucked up.
Of course, it's not happening anymore so I got to wait to test it out.
Btw, I was experiencing long load times too when this was happening and I did look at the code again to see if there was something there I was doing wrong. This is when I noticed I was needlessly requesting a 1920x1920 image from the img_url filter. ie- '| img_url:'1920x'. So I tweaked it down to the size that I want and load times improved significantly.
It happened again!
As per Paul_West's suggestion, I took a look at the src attribute of one of the images that's supposed to be pointing to a valid CDN and I'm getting the following:
<img class="container-fit" src="//cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_930x930.gif" alt="">
where the src is pointing to a 'no image' gif. This means that the Shopify database is getting mucked up, right? Cause when I set the image again in Shopify admin and then save it, the src will be set properly as follows:
<img class="container-fit" src="//cdn.shopify.com/s/files/1/0063/2730/4262/files/atkinsons-bacarat_930x930.JPG?v=1546059158" alt="">
Please advise if possible.
|an hour ago|
|2 hours ago|