HTML image src case sensitivity

Question

I have image folder names in caps. But the src is in lowercase, so this is not loading images.

I can't make all the image folders lowercase, so I want to change my code to take a case insensitive path.

I have a link like this:

<a href="http://www.google.com">
  <img id="productMainImage" src="images/Tulips.jpg" alt="image" escapeXml="false" class="product_main_image"/>
</a>

I want to make the image src as case insensitive; meaning I want my code to work even if src ="IMAGES/Tulips.jpg".

How to resolve this issue?

Answer 1

Either you can use JS to do this using toLowerCase(), or you need to rename them by yourself.

Also, it depends on the server, and HTML has nothing to do with this, UNIX Servers are case sensitive, whereas Microsoft servers are case insensitive.

Also if you are using any server side language, like PHP, you can use strtolower() as well which would be even better, as client can have JavaScript turned off in which, your page will fail to render images.

Answer 2

This really depends on what OS your web server is running - for example OSX is not case sensitive on the file system but Linux is.

You could create a regex to rewrite the request - apache offers mod_rewrite - but I find it best to create a convention and stick to it - I assume things will be case sensitive so that if I port the site I do not have any issues.

Answer 3

I think you can use .htaccess and RewriteRule to change the path on request. Something like this:

RewriteRule ^IMAGES/(.*)\.(jpg|jpeg|gif|png)$ images/$1.$2