Images don't show up online but they do offline

Post all HTML related questions here. No support.

Moderator: Project members

Post Reply
Message
Author
jseney
500 Command not understood
Posts: 3
Joined: 2014-08-21 23:40
First name: Jean
Last name: Seney

Images don't show up online but they do offline

#1 Post by jseney » 2014-08-22 00:01

Hi I am new to coding and filezilla but I created a website in notepad++ that works perfectly offline but once I transferred my files to filezilla and tried viewing it online, the html basic structure works fine but the images do not show up. I know the paths have to match up and that everything needs to be lowercase and I went back and checked and it all seems to be in order so I'm just a little confused :/ Forgive me if the answer is obvious, I am new to this and trying to learn as I go.

This is what the site looks like offline
This is what the site looks like offline
This is what the site looks like offline
home.JPG (153.88 KiB) Viewed 38014 times
This is what the site looks like online
This is what the site looks like offline
This is what the site looks like offline
home 2.JPG (30.16 KiB) Viewed 38014 times
When I view "inspect element" on the page I get this error code for each image:
"Failed to load resource: the server responded with a status of 404 (Not Found) "

This is my html coding:

<html><head>
<title>JEAN SENEY | PORTFOLIO</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body background="images/back 5.png">
<body text=#FFFFFF>
<center>
<img style="padding-left:30px;" src="images/header 3.PNG" border="0">
</center>

<img style="padding-right:20px; margin-top:10px;" src="images/about me.png" width="400" height="550" alt="" border="0" align="right">
<a href="file:///C:/Users/Jean%20Elizabeth/Desktop/Portfolio%20Website/Contact/Contact.html"><img style="padding-right:22.5px; margin-top:10px;" src="images/contact.png" align="right"></a>
<img style="padding-left:23px; margin-top:10px;" src="images/JCAC.png" width="440" height="550">

<center>
<a href="file:///C:/Users/Jean%20Elizabeth/Desktop/Portfolio%20Website/Resume/Resume.html"><img style="padding-left:37px; margin-top:-290px;" src="images/resume.png" width="420" height="286">
</center>

*note* I know my <a href> won't work

This is what my filezilla looks like:
Capture.JPG
Capture.JPG (74.99 KiB) Viewed 38014 times
Thanks for all of your help!
Top
User avatar
boco
Contributor
Posts: 26930
Joined: 2006-05-01 03:28
Location: Germany

Re: Images don't show up online but they do offline

#2 Post by boco » 2014-08-22 01:09

Everything starting with file:/// in your coding points to a file on your PC. Of course, these paths do not exist om the server. You need to fix all links and img targets to point to the files on the server.
Make sure all files exist on the server.
Note that paths and filenames are case sensitive. Windows ignores case, webservers do not!

For the beginner, a real HTML editor (with syntax highlighting and path correction) might be a better choice. Using NP++ will give clean code but you need to take care of everything yourself.
No support requests over PM! You will NOT get any reply!!!
FTP connection problems? Please read Network Configuration.
FileZilla connection test: https://filezilla-project.org/conntest.php
FileZilla Pro support: https://customerforum.fileZilla-project.org
Top
jseney
500 Command not understood
Posts: 3
Joined: 2014-08-21 23:40
First name: Jean
Last name: Seney

Re: Images don't show up online but they do offline

#3 Post by jseney » 2014-08-22 02:28

Thank you so much, that theory makes sense but would you be able to give an example as to how to link to a file on a server vs an image on a computer please?

so instead of looking like:

<image src="images/about me.png">

what could it look like?

Sorry, thanks!
Top
User avatar
boco
Contributor
Posts: 26930
Joined: 2006-05-01 03:28
Location: Germany

Re: Images don't show up online but they do offline

#4 Post by boco » 2014-08-22 22:41

the img src= path looks valid, however: You either need to encode the blank (using %20), or use filenames without blanks and funny characters. I'd prefer the latter.
The image itself must be in a subdirectory 'images' and carry that exact name, including case. Then it should be displayed, you might have to clear your browser cache.

The link targets are incorrect, however, they must use the same path syntax like the images. If you keep all HTML files in one directory, you just need to specify the document name, like Contact.html (provided it is really named with a capital C).
No support requests over PM! You will NOT get any reply!!!
FTP connection problems? Please read Network Configuration.
FileZilla connection test: https://filezilla-project.org/conntest.php
FileZilla Pro support: https://customerforum.fileZilla-project.org
Top
jseney
500 Command not understood
Posts: 3
Joined: 2014-08-21 23:40
First name: Jean
Last name: Seney

Re: Images don't show up online but they do offline

#5 Post by jseney » 2014-08-24 13:50

Thank you very much that was a huge help!
Top
WaterNlife
500 Command not understood
Posts: 4
Joined: 2014-10-15 20:40
First name: Nicolaj
Last name: Model

Re: Images don't show up online but they do offline

#6 Post by WaterNlife » 2014-10-16 10:47

Hey jseney

Did you got it to work?
Best regards
Nicolaj
Top
spanishflea
500 Command not understood
Posts: 3
Joined: 2016-10-28 15:09
First name: Tony
Last name: Arima

Re: Images don't show up online but they do offline

#7 Post by spanishflea » 2016-10-28 15:13

I was having this same problem, offline all of my images were showing but online some of my images were showing up on my first row, but on the next row I created they all appeared as broken images and I was getting a 404 error, even though they were clearly on the server. After reading boco's post I went through and checked my code paths one more time and noticed that all of the images that weren't showing up were <img src = "images/catalogs/fileName.jpg"> when actually it should have been <img src = "Images/catalogs/fileName.jpg">

All that damn trouble for a lowercase i...
Top
Post Reply

Return to “All things HTML”