CODEWITHSUNDEEP
htmlcssimage
IkeDoud
IkeDoud

Reputation: 87

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.

Upvotes: 0

Views: 1379

Answers (3)

Hycienth Paul
Hycienth Paul

Reputation: 1

All images in all pages are not capitalised and i used the full url foir it like img/image.jpg . Img is the name of the folder where i stored the images foe the pages you can check it from my github account https://github.com/Hycienth-Paul025 and the name of the respository is pauloenergysolution

Upvotes: -1

Kizer
Kizer

Reputation: 1666

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.

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46549

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.)

Upvotes: 1

Related Questions