Help - Search - Members - Calendar
Full Version: HTML Local Images - Not displaying
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Snipely
Hi there - I'm a novice web designer in the process of building one of my first websites as a learning base. I am working off of a Mac computer, and using Text Wrangler and HTML + CSS for this.
I ran into a problem today I can't seem to figure out, and wound up here.

As of yesterday, I could insert local images from my image folder into my code - and they worked just fine (and showed up) when the page was displayed in the browser.

I haven't moved or renamed any of the images, nor do I think I have I changed anything with the code, but now all of a sudden my images aren't working and appear as blue question marks instead of the images themselves. This is the same in both browsers I have tried using to display code (Safari and Firefox) and I can't figure out what's wrong.

I understand that local images won't display on computers other than the computer hosting these local images, (mine), but as the site isn't live yet that isn't an issue, I just need them to show locally so I can lay out the page properly.

I pasted my code work below, in case there's a glaring problem.

Thank you in advance for any help!

<!doctype html>
<html>
<head>
<title>The Round Table</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />


<style type="text/css">

body {

margin:0;

}

.topbar {

background-color:#BB1919;
width:100%;
height:45px;

}

.center {

text-align:center;

}

ul{
padding: 0;
list-style: none;
background: #BB1919;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #black;
}
ul li ul.dropdown{
min-width: 125px; /* Width of the dropdown */
background: #BB1919;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display dropdown */
}
ul li ul.dropdown li{
display: block;
}


</style>

</head>

<body>

<div id="container">

<div class="topbar">

</div>

<div class="center">


<img src="images/logo.png"

</img>

<img src="images/RTquoteupdate.png"

</img>

<div class="topbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Articles ▾</a>
<ul class="dropdown">
<li><a href="#">Latest Article</a></li>
<li><a href="#">All Articles</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>


</div>
</div>





</div>


</body>

</html>
pandy
You must have changed the markup. What you have now wouldn't work. smile.gif

You have this.

CODE
<img src="images/logo.png"
                         ^^^
</img>
^^^^^^
<img src="images/RTquoteupdate.png"
                                  ^^^
</img>
^^^^^^


IMG has no closing tag. Well, in XHTML it has a closing slash, but that's a dead horse. You've also forgotten the closing '>' in the start tag.

You want it like this.

CODE
<img src="images/logo.png" width="" height="" alt="">


It's a good idea to use the width and height attributes (but with values of course). The alt attribute is required. This doesn't affect if the image shows or not though. Just took the opportunity to add some tips. wink.gif
Snipely
QUOTE(pandy @ Dec 31 2015, 03:58 PM) *

You must have changed the markup. What you have now wouldn't work. smile.gif

You have this.

CODE
<img src="images/logo.png"
                         ^^^
</img>
^^^^^^
<img src="images/RTquoteupdate.png"
                                  ^^^
</img>
^^^^^^


IMG has no closing tag. Well, in XHTML it has a closing slash, but that's a dead horse. You've also forgotten the closing '>' in the start tag.

You want it like this.

CODE
<img src="images/logo.png" width="" height="" alt="">


It's a good idea to use the width and height attributes (but with values of course). The alt attribute is required. This doesn't affect if the image shows or not though. Just took the opportunity to add some tips. wink.gif



I appreciate the tips, and the help, thank you.

So now I have;

CODE
<img src="images/logo.png" width="20px" height="20px" alt="Text Alternative">


<img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative">


And still two blue question marks. blink.gif

Have I still got something wrong with the image tags, or is this a matter of something else in my computer or with the file path being messed up? I still can't get the images to show.

Also, can I bother you and ask you a few questions?

Would it just be better to upload these images somewhere and work like that versus using local files?

If that was a 'yes', do you have a place you would recommend uploading the files?

I'm sorry, I'm mostly self taught and still new to the coding scene. Thank you again.
Christian J
QUOTE(Snipely @ Dec 31 2015, 09:37 PM) *

So now I have;

CODE
<img src="images/logo.png" width="20px" height="20px" alt="Text Alternative">


<img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative">


And still two blue question marks. blink.gif

Is the HTML file in the same directory as the "images" directory? Have you renamed the latter, or the images themselves?

QUOTE
Have I still got something wrong with the image tags

Yes, the WIDTH and HEIGHT attributes don't use px units in HTML (only in CSS). That shouldn't prevent the images from showing up, though.

QUOTE
Would it just be better to upload these images somewhere and work like that versus using local files?

I say "no" on behalf of pandy. tongue.gif
Snipely
QUOTE(Christian J @ Dec 31 2015, 05:37 PM) *

QUOTE(Snipely @ Dec 31 2015, 09:37 PM) *

So now I have;

CODE
<img src="images/logo.png" width="20px" height="20px" alt="Text Alternative">


<img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative">


And still two blue question marks. blink.gif

Is the HTML file in the same directory as the "images" directory? Have you renamed the latter, or the images themselves?

QUOTE
Have I still got something wrong with the image tags

Yes, the WIDTH and HEIGHT attributes don't use px units in HTML (only in CSS). That shouldn't prevent the images from showing up, though.

QUOTE
Would it just be better to upload these images somewhere and work like that versus using local files?

I say "no" on behalf of pandy. tongue.gif


I am using both HTML + CSS... still no to pixel units? (And since I've never used other units... what should I use?)

Ok, so no uploads, local files are good.

No, I haven't changed the names of any of the images, or of the folder they are stored in.

As for the directory - My folders run like this;

Desktop > Websites (Folder) > Images (Folder)

and

Desktop > Websites (Folder) > Saved Code (Folder)

So the code is saved in one folder and the images are saved in the other folder... is that what you meant?

Thank you! blush.gif
Christian J
QUOTE(Snipely @ Dec 31 2015, 11:12 PM) *

I am using both HTML + CSS... still no to pixel units?

In CSS you need the px unit, but not in HTML where it's already implied (only if you use percent in HTML do you need a % unit).

QUOTE
(And since I've never used other units... what should I use?)

For images px is the normal unit in CSS. Usually it makes sense to resize the image file to the same dimensions that you specify in the HTML or CSS, that way both file download time and page rendering speed become optimal.

QUOTE
As for the directory - My folders run like this;

Desktop > Websites (Folder) > Images (Folder)

and

Desktop > Websites (Folder) > Saved Code (Folder)

So the code is saved in one folder and the images are saved in the other folder... is that what you meant?

That sounds like the code files are in a folder parallell to the one with the images. Then the URL must go up one step with "../" before going into the image folder. This can be done like this:

CODE
src="../images/logo.png"

See also http://htmlhelp.com/faq/html/basics.html#relative-url
pandy
Regarding separating what's CSS and what's HTML, it can be a little confusing at first, especially if you use inline CSS (the style attribute).

If you have something like this (and God forbid you actually use this!)...

CODE
<img width="200" style="height: 500px" alt="My guinea pig Sue Ellen">


...everything but 'height: 200px' is HTML and must use HTML syntax. That is, not even the 'style=""' is CSS. 'style' is a HTML attribute and the equal sign and quotes belong to it. Only its actual value is CSS and must use CSS syntax.

<img width="200" style="height: 500px" alt="My guinea pig Sue Ellen">


You may think using the width and height attributes instead of using CSS is old school, but it actually helps the browser when rendering the page. If you have a page with text and many images the text will load first and the images fill in as they load. If you leave width and height out you may see how the page rearrange itself as the images load one after the other, especially if the images are large (kB), the server is a little slow or if you are on a slow connection. Locally you won't see it as everything loads instantly. If you use width and height the browser reserves space for the images from the start, and things don't move around as the images load. Much more pleasant looking.
Snipely
CODE
src="../images/logo.png"


Using this format fixed the images on the main website I'm building... just not on the other. I suspect I have an issue somewhere else in the files, the images I'm using, or in the code, so I'm going to spend some time going over everything and double checking myself.

Thank you both for taking the time to explain everything, I really appreciate the help, and if I run into another problem, I'll definitely be coming back here. happy.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.