Img src="" help

Hello.

I just downloaded Brackets and was greeted by the index.html file.

I was looking through the source code and saw this:

it says <a href="screenshots/quick-edit.png"> <img alt="A screenshot showing CSS Quick Edit" src="screenshots/quick-edit.png" /> </a>

When I copy pasted the link into my web browser it does not link to anything?

Yes because it is linking to a PNG which is an image file. It is more likely to be stored locally inside your pc.

Yeah but it isn’t though. It’s a default file that was opened when I downloaded Brackets. If I were to link an image stored on my pc and share the file with someone else, will they be able to see the image too?

The key is src="screenshots/quick-edit.png"

It doesn’t use https or a / in front, which means, you have to look at the url in which you can see this image.

So for an example,
if your url address said file://some_directory/pictures/whatever

then you’d have to look in some_directory/pictures/screenshots/quick-edit.png

Notice how I just added to end. If your image src had a / in front of it, then you’d have to start at document root.

What do you mean by document root? Also, do I have to add a / before i paste my link or can I just paste the link?

It’s usually best to have a leading /. It’s more explicit as to where the file is.

Document root (without going into too much detail), is usually http(s)://domain.com/ with the last slash being root (document root).

So that when you see /image/my_image.png you know you can find that image at http(s)://domain.com.

However, if your image src read image/my_image.png you would have to look at top of address bar and see what url you are at and then you could find the picture. (Annoying to do).

What if there were two different domains with the same document root?
Ex: http(s)://domainA.com/image/my_image.png
http(s)://domainB.com/image/my_image.png

Do I have to paste the full link: http(s)://domainA.com/image/my_image.png
or just: /image/my_image.png

If this file is index.html and url says ...something/index.html then the image will should be located at something/screenshots/quick-edit.png

With two domain it can be seen as two working directory so yes you have to type complete url.

1 Like

Oh okay, it was an index.html file and I see it now, thank you!