Web Development – Case-Sensitivity

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…

<img src="image.jpg">

…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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s