My client’s final website was ready to be deployed. Everything was going according to plan. The team had put several hours of meetings into this final product. After getting some great feedback on each iteration of the site, we were happy and ready to show it to the world. Moments after deploying the site, however, I noticed that a few bits of media (some images and a couple HTML5-embedded videos) were not being found by the browser, despite other images on the site being found without any problems. I knew I needed to solve this problem as quickly as possible!
But what could the problem be? My final development tests all worked. My development machine was running Windows and I used a small Node.js server to host the site and test it on several devices and browsers. Everything seemed fine—until I deployed it to the Web host’s server. I inspected the img tags for the elusive images and I noticed something interesting.
While my code read something like this…
…the name of the corresponding file was image.JPG, with a capitalized file extension. While my Windows testing environment never complained about a file extension’s case, the Web server’s Unix-like OS was of course case-sensitive. I changed the file extension to match its lowercase attribute value in the code and the media was found by the browser. All was well, though for next time…there’s a module (perhaps more than a few) for that!