Missing images after purging everything

dash-crypto
#1

Hey there!

I’m fairly new to cloudflare and I’m currently on the free version for my site - all has been good and great no issues. Just recently I purged everything and I started noticing images turning up as blank images after clearing my website cache/data from my browser. Is this a common thing? Is there a fix? Or is there a time delay on cloudflare’s end?

Thank you,

Paolo

#2

If they’re blank, could you check your browser’s console error log? You can get to this by pressing f12 -> click “console” in the devtools, then screenshot your console window to here (you can screenshot with windows+shift+S or command+ctrl+shift+4 on mac, then paste the image to a reply here).

Also, if you’re fine sharing your domain, you could give us a link to a page where this happens.

#3

Thanks for the quick reply Judge.

my domain is https://paolomanriquephoto.com/

I’ve noticed that its fine on google chrome on a desktop, but I’m missing images throughout my website on safari (desktop/mobile), chrome (mobile), and IE (desktop)… weird!

SOS
.
.
.
UPDATE: I turned on developement mode and that fixed everything! I wonder if creating a page rule for edge cache TTL for 2 hours fix the issue?

#4

You probably had some bad combination of rules. You definitely don’t need an edge cache 2 hour rule if everything is correct you can just set the default cache time. Unfortunately to debug it you’d probably have to break it again so you can use F12 and see the error message. As an aside nice site - the girl on the home page has a haunting photographic quality I find I keep peeking at your home page. :slight_smile:

#5

FIXED: Disabled WP Speed of Light plugin for Wordpress solved my problem.
Thanks for the reply Stenberg! I ended up troubleshooting with some wordpress plugins and turns out it was one of them~ All is good on my end and server end :smiley: and thank you!!! Right?!

#6

For future reference, which plugin and what solved the issue?

#7

It was the plugin WP Speed of Light that was the culprit, by leaving it disabled through brutal process of elimination I was able to get my site to show up on all browsers with no issues/missing images - I guess the plugin broke my site in someway! Thanks Withheld ~ hopefully this info will come in handy for others

1 Like
#8

Thanks for the update @manriqjp

#9

Never mind, its still doing it for some reason! Some images are missing on my site again. Any ideas what could be causing it at this point? :o

#10

Looking at my browser’s Dev Tools, the only missing images are 403 Forbidden from Instagram.

What’s a page that has missing images? Can you open your browser’s Dev Tools and check the Network tab to see what HTTP code is returned for them? It should be a 200 for a successful load.

1 Like
#11

Still doing it, so here is a screenshot! the 200 is present, however the image container remains blacked out. I have images missing across my site despite not seeing actual errors pop up from my console.

Update: my site was fine for 2 days after deactivating some plugins, but at this point after clearing cache data from my site, its doing it again on safari mobile/desktop and chrome mobile. I dont think its a plugin issue since it keeps happening after a few days or so of removing plugin(s)/purging everything.

#12

Ah…so it does look like all 200s, but Firefox Console (also in dev tools) doesn’t like some of the javascript for that function. The picture is there, but the warning is not encouraging. No warning in Chrome, though.

#13

Weird! My site was fine prior to setting up cloudflare do you have any idea what may be causing this? Possibly a setting in cloudflare that may lead to this?

#14

Ok, in Safari, I’m seeing the issue, but nothing shows up in Console.

It could be a CSS problem. Do you have Minify turned on in the Cloudflare Speed settings page? Minify hasn’t broken my stuff, but it could be an issue with yours.

@MarkMeyer is pretty good with tracking this stuff down. Maybe he knows why.

1 Like
#15

I’ll play around with my minifying settings on cloudflare and see - thanks @sdayman ! @MarkMeyer your input would be greatly appreciated! :slight_smile:

UPDATE: I turned off all minify settings on cloudflare and purged everything. so far things are working again on safari mobile/desktop and and chrome mobile… will see in a couple of days again… :sweat_smile::crossed_fingers:

3 Likes
#16

So the issue came back and I am stumped completely on a way to fix the problem! (not my strong forte as everyone can tell)… Would it be a security encryption issue?, conflicting cache settings from wordpress plugins/cloudflare? or broken codes based on my cloudflare settings perhaps? :thinking:

Chrome desktop is fine, but
Chrome mobile, safari desktop/mobile, edge, ie are where the missing images seem to pop after after purging everything and clear long out the cache stored on those browsers(desktop/mobile) :grimacing:

#17

Everything but IE works and it’s a good idea to disable caching in your web browsers. Now for IE, it’s the cache control header. See more info here

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265017(v%3Dvs.85)

https://support.microsoft.com/en-us/help/323308/internet-explorer-file-downloads-over-ssl-do-not-work-with-the-cache-c

1 Like
#18

Like caching settings in my web browsers or to disable any options that allows web browsers to cache (e.g. wp fastest cache plugin?) If its the former, how would I go about turning that off, all I’ve been doing up to this point is deleting cache files related to my website to see the current. Out of curiosity of how it works, why is it that I see these issues on my end, but not on your end and what does disabling web caching do that fixes the issue? :upside_down_face:

#19

Not on the server, just disable the cache setting in your browsers used for web development & testing. A possible reason is that your browser may be caching content that’s no longer on the server because of images edits etc. That’s why it’s good to disable caching in your browser.

#20

Ah gotcha, I’ll see if that does the trick! I’ll look into the link for IE as well. Thank you! I just wanna take photos tbh, this is wayyyyyy to much website back end stuff for my liking XD. Will update this post eventually soon!

UPDATE: I’m at work at the moment so i cant exactly test this out on my end via mobile! but I have turned on developer mode through cloudflare and it seems all the images show up fine except like you mentioned on IE. But with this in mind, how can I fix this so that others who will view my site going forward sees all the images once everything on my end is sorted out, I’m worried that perhaps things may look fine on my end but with a new visitor coming through my site they may have missing images? since everyone’s website browser cache? Or is the issue more simpler than it is and I just don’t see it if you know what I mean?