This week has been incredibly trying when it comes to technology. Don’t you hate it when something isn’t working, you move heaven and earth to fix it, and it turns out to be some little stupid thing that you could have fixed in three seconds?
I have another lovely anecdote to share, but this is one that I struggled with for four hours this past weekend and finally fixed it with a two minute tweak.
My website which includes several social media icons/ images that were working correctly when I ran it locally. When I moved it to my server on fatcow, a few of the images were not appearing. A look at the source code with the Chrome developer tools showed that the images had just mysteriously vanished, with the error report stating: failed to load resource.
I had several missing images on Chrome, no missing images on my Firefox browser, and when my boyfriend obligingly tested it on his computer he had different images disappearing on each browser.
You can just imagine my state of WTF is going on right now.
After much googling, calling, and hair-tearing, I found the solution to this problem.
Adblock on Chrome (and probably for other browsers, since my boyfriend was running different adblock software on Firefox) determines what is an ad by regex and searches for keywords in the image name.
I had assumed that since none of my image names containted “ad” or “banner” or anything like that, this couldn’t apply to me. But once I turned off adblock, it magically worked. Apparently “pink_twitter_icon.png” was setting it off. The solution was to relabel my images with names that did not contain any keywords that would trigger adblock. So now my icons are labeled a very vanilla “pink_icon1.png” and all the browsers and adblock services are happy.Tweet