'Images load fine locally, but not on webserver

been looking around here for a bit but still haven't found an answer.

Have an issue with a site I'm working on. Site is entirely self contained in a folder. Trying to reference one image for a parallax section on the website. Referenced like this in the main css file:

#services {
background-image: url("../images/dark.JPG");}

Main css file is located in maindir/css. Image that I'm looking for is located in maindir/images/.

It worked locally, so I tried to upload the entire folder to my testing domain. However, when I load up the site, this one specific image doesn't come up. I can confirm in FileZilla that the file uploaded without a problem, and can download and confirm that the file's intact. Other images load without a problem, but trying to replace this specific image with any other image yields the same results.

Is this something I may be doing wrong or potentially an issue with my webhost? Going through Lunarpages and have had a few random buggy incidents like this before, but I wanted to figure out if it was my own ineptitude to begin with haha. Again, nothing is stored anywhere on the computer - all local to the folder the rest of the site is in.

htmlcssimage


Solution 1:[1]

Like I figured in my comment, it's a capitalisation issue. On your local machine, where the file system is case insensitive, it's no problem to use "JPG" to access a file ending in "jpg". However, on the Apache server, case does matter.

http://nearsighted.ninja/images/dark.jpg loads
http://nearsighted.ninja/images/dark.JPG does not load!

Solution: write the filename in your css exactly as it is, with lowercase "jpg". (Or, rename the file.)

Solution 2:[2]

You are probably developing on a Windows machine, and deploying on a Linux machine. Windows file system is case insensitive, so .jpg and .JPG and .Jpg are all the same.

On Linux, where you're deploying, the file system is usually case-sensitive. Which means xxx.jpg and xxx.JPG are interpreted to be different files.

It's always better to use the same environment for both development and deployment. You can install a virtual machine for testing your work locally.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mr Lister
Solution 2 Kizer

Related Questions