Why Is Image Not DIsplaying Locally?

Hello

I am trying to rebuild my DJ webpage - http://www.jameswinfield.co.uk/v2.html.

I use Brackets however it isn’t displaying the background image which means I have to check all my changes by uploading the files via Filezilla each time I want to check what I have amended.

I know it is something dumb like the url.

Please can someone help

Thanks
James

Sure it is; you don’t see the bg.jpg? It’s referencing this link.

http://www.jameswinfield.co.uk/bg.jpg

I’m seeing a pinkish disco ball. Perhaps you need to clear your cache.

The OP says it is working online OK but not on his PC.

Try changing /bg.jpg to bg.jpg

Is “Brackets” some sort of program?

Anyway, we’d need to know your entire file structure that matters; where every file is located, etc.

Yes it is: http://brackets.io/

1 Like

If I had to guess I would say your local folders are not set up correctly. Your links in your css are absolute: ‘/bg.jpg’. If you have your root folder on your local machine set up differently to the structure on your remote server then it’s not going to show up.

That’s not absolute.

Absolute is something like : http://www.sitehere.com/scripts/images/subfolder/image.jpg

Now, /images/subfolder/image.jpg…

That’s relative. Relative to the base folder.

Not how I learnt it.

If you have a webserver running on -
/var/www/html/public_html

Then an absolute link /bg.jpg (with slash) would be equal to:
/var/www/public_html/bg.jpg

Regardsless of where you add that link making it absolute (the backslash revolves back to public_html.

A relative link e.g. : bg.jpg (no slash) or would then change depending on where it was placed. So if I had that link inside the main.css file inside /css the new url for that link is now:
/var/www/public_html/css/bg.jpg

Does that really matter?

Quote from the page:

If that file path is relative (meaning that it doesn’t start with http://),

What you gave is still relative. As I said, it’s relative to the root. I can’t take that exact URL and plug it into my page and have it work. No. It’s not absolute. There is no ONE possible URI.

Yeah I’m mixing terminology I applogise. It’s a relative link that resolves back to the root directoy rather than relative to the document. My point being that the relative link on the local server could be resolving back to a different place.

I wasn’t trying to invalidate your point altogether; just point out your terminology was incorrect. Carry on :slight_smile: .

Removing the / stops it from working online then :frowning:

That’s because the image will try to be found in the folder as your CSS. So it would try and find your imae here:

http://www.jameswinfield.co.uk/assets/css/bg.jpg

Perhaps make your path

…/…/bg.jpg

If that doesn’t work, then you have some bad folder structure or something that doesn’t match what you have online.

Thank you ever so much. It works now.

Can I ask why?!

You doing /bg.jpg was probably referencing too deep. What you think is the root, isn’t probably the actual root.

FYI though, doing /bg.jpg is the easiest since it allows for more…fluidity.

No. You can’t… Just kidding :stuck_out_tongue:

I haven’t read all the topic but , on the web, http://www.jameswinfield.co.uk represents your computer.

From there, you have to go down to folders to find the file. The symbol “…/” represents going down one folder.

Hence “…/…/” two folders.

1 Like

I want to clarify Molona’s explanation.

There are TWO TYPES of link PATHs you can use on a website : Relative and Absolute.

  • RELATIVE paths look like
    mypath/

…/childDir/file.png

thisFolder/anothrerFolder/filename.jpg

…/directory/myDoc.html

‘…/’ represents PARENT of the current directory ( essentially the folder that contains the file)
‘/’ means a CHILD of the current directory ( thus you’ll never have: filename.gif/someDir)

lets say you had a folder called ‘halfRoot’, INSIDE it you have two other folder, one called: ‘css’ the other ‘images’ to reach an image in the images folder from a file in the css folder you would have to go UP ONE DIRECTORY
so you would use : …/images/myPNG.png

to reach the same image from a file in the halfRoot folder you would simply do: images/myPNG.png

The cool thing about RELATIVE file paths is, that when migrating, as long as you move the root folder your links won’t be broken. In a sense the site is independent of where it’s stored.

• ABSOLUTE paths
look like :http://masterOf.myDomain.com/images/image.jpg".

you must write the whole path out the WHOLE path. it’s more verbose but simpler to grasp as where you are calling the link from in the file structure has no baring on how to write the link.

this, however , means when you move the TARGET folder someplace else ( or if your connection to the server is severed) your links are broken.

hope that helps

2 Likes

@dresden_phoenix Definitively, you explained a lot better than I did :smiley:

The best option, imho, is to set up a local server environment that matches your online one. That’s easy to do, using something like MAMP (for Mac) or XAMPP (for PC).

Thanks all for your help and explanation.