Can I link to images that are stored locally on my own computer?

Question

Rather than using a url to link to images that exist on the web, can I link to images that are stored locally on my own computer?

Answer

Yes you can! In fact, developers often work locally before pushing their code to production. When dealing with assets like images, we will often want to include them in a folder which will also contain our HTML document. With a properly arranged directory or folder structure, we can create a path which points to our image and is relative to our HTML document. In this scenario, this relative path will be the value of the <img> src attribute.

For more information about relative and absolute paths, take a look at this chapter.

42 Likes

Really helpful tips for future organize.

3 Likes

Supa, Dupa helpful hints and tips!!!

thank you very much .

If the image is stored locally, and you have website live, will the image be cached onto the website or will always be sourced from the local file. For example if you were to delete the image from your hard drive, would that mean people viewing the website would not see the picture?

1 Like

The local drive and the remote server are independent. There is no connection between the local drive and the server so anything deleted from one will not be affected on the other.

3 Likes

Must there always be (") after src and before the URL and at the end ?

To promote best practice and trust less to the various and myriad user agent’s imperatives and ability to fill in the missing bits, we ought make it a habit to always delimit attribute values with quotes. This becomes more apparent when we begin generating HTML with other programs.

Granted, browsers have always been pretty lenient and really do try their best to make sense of the markup during parsing. It’s a long shot though whether the vendor your most important customer is using will be so trustworthy. Don’t leave things to chance. We are the imperative stipulators, not the browsers.

<img src="my_image.png">

As a rule, I always use double quotes on attributes and single quotes in most code. That way an HTML string can be written in single quotes in the script that is generating it, and the attributes in double quotes without needed escapement. The double quotes are treated as printable characters.

Anyhow, that may be a ways down the road but now is the time to entrench good habits. This is one of those habits that will go you steadfast all the long way.

4 Likes

“For more information about relative and absolute paths, take a look at this chapter.”
The “chapter” link is broken.