Images not showing on web page

[zibelzi]

I'm a newbie using FZ. My problem is I can't get my images to appear on my web page. I keep getting the small blue box with the question mark on my web page. When I upload my web page, I can get all the copy to appear. My image directory is on my remote site side were the server is located. But image directory was still not showing any file size. I decided to go into my images directory and individually transfer my jpeg image to the server side in FZ window. My image file size than show up on server side of window. This proceeder still did not bring up images on my web page. Also, what information goes in the 'Default remote directory' in the Site Manager? Will someone please help me out with this problems?

[boco]

Check how you link to the images in your code. Paths have to match, including case.

Also, what information goes in the 'Default remote directory' in the Site Manager?

Not important, only a preference. If you don't enter anything, you will start in /.

[botg]

Not important, only a preference. If you don't enter anything, you will start in /.

No, you'll start in the directory the server has set as default. It usually is / though, but it can be anything else.

[zibelzi]

Check how you link to the images in your code. Paths have to match, including case.

Also, what information goes in the 'Default remote directory' in the Site Manager?

Not important, only a preference. If you don't enter anything, you will start in /.

I must do not understand what you are saying. All my images are embedded into the code of my html file. I am not using any CSS at all. I'm just starting to learn coding. I thought all I had to do if only using html code embedded with image(img src=), was to put index.html file and image directory on the server. I have no problem opening the html file including embedded images. I am discussion directly from my computer in the browser. It just happens when I try downloading(open) the html file from the server to be view in my browser.

This is what I am doing. From my directory in the top section of my local site(my computer). I looked for the same directory in the bottom section of my local site(my computer) side. I did not see that directory name from the top section on my computer. But, only the html file and images directory associated in the directory in the top section on my computer. I then dragged that html file including image directory, to the bottom section of the remote server using FZ. Then I tried to download(open) that html file on the remote server in my browser. Again, all I got showing in the browser was the background color and the copy in my html file. Please help so I can try again to resolve this.

[boco]

Ok, first: What you are doing is not embedding.

With the <img src=... tag, you are linking to an external image. Thus a few conditions have to be met:
1. Use relative links inside your HTML. That means you specify the image path relative to the position of the HTML file.
2. Check the file and directory names you are using. They must match exactly, case included. A webserver (which usually runs under Linux or similar UNIX-like OS) has a case sensitive file system. So, as an example, image.png and Image.png are seen as two distinct files. Many Windows users run into trouble, because Windows ignores case completely.
3. Have the external image files where the HTML expects them. So if you link to images/img1.png, the file must be at exact that location on the server: in a subdirectory called images in the same location as the HTML file.

Examples of good and bad links:

Good: images/img.png - Relative link, all lowercase. Have the image file at that location and every browser will show the image. HTML and images directory may be moved without breaking anything.

Bad: /myweb/images/img.png - Absolute link, the images directory may not be moved or the links break.

Very bad: C:\Documents and Settings\user\My Documents\images\img.png - This link resembles the local path of an OS (Windows XP in this example). These paths generally do not work on web servers, ever.


Could you give an example of a link you're using?

[zibelzi]

Ok, first: What you are doing is not embedding.

With the <img src=... tag, you are linking to an external image. Thus a few conditions have to be met:
1. Use relative links inside your HTML. That means you specify the image path relative to the position of the HTML file.
2. Check the file and directory names you are using. They must match exactly, case included. A webserver (which usually runs under Linux or similar UNIX-like OS) has a case sensitive file system. So, as an example, image.png and Image.png are seen as two distinct files. Many Windows users run into trouble, because Windows ignores case completely.
3. Have the external image files where the HTML expects them. So if you link to images/img1.png, the file must be at exact that location on the server: in a subdirectory called images in the same location as the HTML file.

Examples of good and bad links:


Good: images/img.png - Relative link, all lowercase. Have the image file at that location and every browser will show the image. HTML and images directory may be moved without breaking anything.

Bad: /myweb/images/img.png - Absolute link, the images directory may not be moved or the links break.

Very bad: C:\Documents and Settings\user\My Documents\images\img.png - This link resembles the local path of an OS (Windows XP in this example). These paths generally do not work on web servers, ever.


Could you give an example of a link you're using?

I said I was not using CSS. I meant I was not using an external CSS. My mistake.
I check my relative links. They all are lowercase. Located in my images directory. My image directory is spelled all with lowercase.

The hierarchy of my directories are dogs/html/images. My index.html file and images directory are both located in my html directory. I don't know if this means anything. But, when I was attempting to upload my files to the server using FZ. My software firewall was preventing me from connecting to the server. Even thought I opened port 21. My firewall was asking me for permission to open up ports in the 50000 range. I then opened several ports in the 50000 range. Only then would I have access to the server. So that I could upload my files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
*{margin:0px; padding:0px;}

p,a,img,h1,h2,h3,h4,div,html,ul,li,ol {margin:0px; padding:0px; border:0px;}
ul,li,ol{list-style-type:none}

body{
margin:0px;
padding:0px;
background-color:#4a0300;
font:normal 12px Arial, Helvetica, sans-serif;
color:#696969;
text-decoration:none;
}
a{
text-decoration:none;
color:#6c286d;
text-decoration:underline;
}
a:hover{
text-decoration:underline;
color:#000;
text-decoration:none;
}

.cd-bg{
background:url(images/cd-bg.jpg) left top repeat-x;
}

.content-text{
font-family:"Trebuchet MS";
color:#000000;
text-decoration:none;
font-size:22px;
}

.form-bg{
background:url(images/form-bg.jpg) left top repeat-x;
background-color:#c2c2c2;
}

.form-text{
text-decoration:15px;
font-size:15px;
text-decoration:none;
color:#000000;
}


-->
</style></head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="901" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img src="images/header-left.jpg" alt="" width="450" height="380" /><img src="images/header-right.jpg" alt="" width="451" height="380" /></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#fdca93"><table width="854" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="483" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img src="images/left-bar-header.jpg" alt="" width="483" height="65" /></td>
</tr>
<tr>
<td align="right" valign="top"><table width="462" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" class="cd-bg"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="12" align="left" valign="top"></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/cd-cover.jpg" alt="" width="280" height="340" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>

</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="content-text">The training CD Will teach dogs to obey, sit, stay, come, lay down, stop pulling, stop digging, stop barking, stop chasing, stop chewing, stop jumping, stop bolting, stop being aggressive, and stop other bad behavior.</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table></td>
<td width="22" align="left" valign="top">&nbsp;</td>
<td width="349" align="left" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img src="images/right-bar-header.jpg" alt="" width="349" height="67" /></td>
</tr>
<tr>
<td align="right" valign="top"><table width="330" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" class="form-bg" style="border-left:3px solid#e4e4e4; border-right:3px solid #e4e4e4;"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><img src="images/form-text.jpg" alt="" width="306" height="49" /></td>
</tr>
<tr>
<td height="25" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">First Name:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top">
<input type="text" name="textfield" style="width:305px; height:30px; border:0px;" /> </td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">Last Name:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield2" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">Street Address:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield3" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">City:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield4" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">State:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield5" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">Zip Code:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield6" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="form-text">E-mail:</td>
</tr>
<tr>
<td height="4" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"><input type="text" name="textfield7" style="width:305px; height:30px; border:0px;" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top">
<input type="image" name="imageField" src="images/send-btn.jpg" /> </td>
</tr>

<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/form-bottom.jpg" alt="" width="335" height="13" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/testimonials-box.jpg" alt="" width="840" height="201" /></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>

</table></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/bottom-round.jpg" alt="" width="901" height="14" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

[botg]

Quaint, table-based layouting. Reminds me of the 90s

[zibelzi]

Thanks for the Help. I figured it out.

[ansateza]

I read this forum but didn't find answer or solution for my question/problem.
I have all OK on my blog posts, images shows as should be. But for sure I have some coding problem.
Also idk if this is correct place for this problem but as researching google i found this as nearest to my problem (if anyone knows better place pls tell me an i will redirect).
So.. What is the problem: When I publish post its shown OK on my blog and no problem with the picture, but this same post is shown diferent on another sources where i linked it as for example My facebook Fun Page http://www.facebook.com/WellbeingSupport and Technorati Page http://technorati.com/blogs/wellbeing-support.com
There my post picture is shown something as html f.e.
Technorati
Recent blog post

15 Outdoor Games to Keep Kids Physically Active After School

div.img{ height:auto; width: 33%; float: left; text-align: center;} div.img img{ display: inline; margin: 2px; height:auto; width: auto; border: 1px solid # .............
Same is on Facebook Page.
So I will please for some help or redirecting me to somewhere where I can solve this problem which starts to annoying me and i think that i lost my Technorati rank because of it.
Im waiting for response and giving me some clue.
Ana