Linking to images on computer from html code

Linking to images on computer from html code
0

#1

hey guys i am a little confused, i am currently using the atom code editor on my computer, today i am beginning to build my own website and i am wondering if it is possible to link photos on my computer into to my html code. i would really appreciate some feed back.


#2

You can reference the src via relative paths. This means that it will be based on where your html file resides.

For example:

/Projects/hello/index.html
/Projects/hello/images/foo.jpg

In the directory structure above, in your index.html, you would reference foo.jpg as <img src="./images/foo.jpg" />

If you need to reference a folder up, you can do so like:

/Project/hello/index.html
/Project/bar.jpg

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

#3

In brackets you are able to just drop the image into the file you are working on. You might be able to do this in atom too. This would be easier to manage so you don’t have to go through a bunch of folders before you reach the image file.


#4

While using relative paths (what is described above) will work for local development, please remember that when you want to make your project live you will need to put any images you use online. In order for someone on the internet to see your picture, your picture must be on the internet. Depending on how you are hosting your project, you may be able to host images the same way (e.g. GitHub Pages) or you may want to use a free hosting service. Just don’t use Imagur and CodePen together.