What is the correct img src for an image that is my own and not borrowed from another website?

Question

On my computer, the folder that holds my .css and .html file also contains some images that I want to insert in my html. I understand how to get a url for an image if I borrow it from another website. How do I acquire a url for an image that is in my folder, but not yet on the internet? Do I have to upload the image on another website in order to get a link?

I also understand that I should use the base tag in the head to provide a link for my relative urls in the html but at this stage, I don't have a link that contains the images.

Answer 1

Assume your web page(.html) located in C:\Project\index.html.

You can place your image in the same path with the web page, and use it with relative path:

<img src="img.jpg"/>

Or if it's in other path, more like some sub folder of your web root: C:\Project\images:

<img src="/images/img.jpg"/>

If image file is located in the parent folder of your index.html, use that:

<img src="../img.jpg"/>

The last useage is to use the absolute path, which is not recommended:

<img src="C:/Project/images/img.jpg"/>

Answer 2

It's simple. For images they are based one your relative directory location (or you could simply give the entire URL of the image). For example say you have a file structure like so:

• website.html
• myImage.png

To access the image all you need to do is:

<img src="myImage.png" ... />

When there are sub directories you simply go into the folder to get to the image:

• website.html
• [subFolder]
• ---> myImage.png

Then we can do:

<img src="subFolder/myImage.png" ... />

Use .. to move-back a folder:

• myImage.png
• [subFolder]
• ---> website.html

For example:

<img src="../myImage.png" ... />