Picture won't show up in browser!

[saraj82634189]

I'm working on a school project and are having a hard time with all this coding since I'm new to this. The screenshot I uploaded is how it's supposed to look, but when upload it to my server it won't show... There's just an question mark where the picture ("Landås" with an orange underline) should be, and when I click on it I get to an error page, not a new page as I'm supposed to. When I try to real-time preview it in Dreamweaver everything seems to be fine. What have I done wrong?

The picture I'm talking about is the one named "Landås heading", the code: <div align="center"><div class=".landås" id="landås"><a href="Landås.html" title="Landås"><img src="Landås heading.png" width="200" height="140" alt=""></a></div>.

I've uploaded my site via FTP so you can see the whole coding on this link: Routes

[B i r n o u · Accepted solution]

I suspect the white space in the image filename... so your local server must be more indulgent than the remote one...

in an other hand you should avoid all the specific char as å, and refer to Grammar of CSS 2.1 to be sure to not be in a trap somewhere.

[Jon Fritz]

A couple of things to check...

1. Make sure your image file name and link href are identical, right down to case structure. On your local OS, IMAGE.jpg and image.jpg would reference the same file. On a server, they are two different items.

2. You should also avoid using special characters and spaces (use hyphens or underscores instead). Normalize your file names to avoid possible accidents involving your case structures.

3. Verify you have uploaded the picture as well as the html file. When you add images to .html files, they're not actually embedded in the page, they are only referenced via the src attribute in the <img> tag. So when you upload the .html, you also need to upload the .jpg file separately.

[saraj82634189]

It was as simple as the special letter "å", when I changed the name using an "a" instead everything seems to be okay! Thanks for the help 🙂

[B i r n o u]

cool... but as we told you, you also should avoid the white space in a filename... you can adopt the hypen, the undescrore, or the camel case...

so instead of having

Landas heading.png

you could have

Landas-heading.png (hypen)

Landas_heading.png (underscore)

landasHeading.png (camel case)

but whatever you choose, avoid the uppercase or number as a first letter...

[saraj82634189]

I've never thought that it would be a problem, there's so much to learn and I'm happy for all the tips and help I get! I will change the names of my pictures, and have that in mind for all of the future picture I'm dealing with for web sites.

[B i r n o u]

the filenaming convention works not only for image name, but for everything that you will have to name somewhere undercover during the code aspect of your website, it includes for a general purposes:

• files and folders names
• class, name, id attributes values
• variables, functions, mixins, ...
• classes, methods,...