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.

4 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 ?

1 Like

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.

7 Likes

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

if you pointed the src to a folder in the same directory as the .html file named pictures would that work?

for example a folder structure as such:

My HTML Website Folder
  index.html
  pictures folder
    headshot.jpg

and a index.html as such:

<body>
  <h1>My Name</h1>
  <img src="/pictures folder/headshot.jpg" >
  <p>Hi, I'm My Name. I like fishing, hiking, and biking.</p>
</body>
1 Like

Hey @omnipresentaura

Why don’t you try it? I think the best way to learn these things is from hands on experience because what if we’re wrong? I could just right up say yes, it is able to(which I’m pretty sure it is), but that way, nothing will be learned and I could be wrong.

To answer your question, yes you are able to do that, but I encourage you to try this stuff out on your own as well, because when trying out new things in coding, you can learn so much more than you started out trying to learn.

1 Like

If we assume that index.html is in a local folder on your machine, then it should be a relative URL, not an absolute one.

"pictures/headshot.jpg"

or,

"./pictures/headshot.jpg"

Any URL that starts with "/" points to the site root, which on your local machine is C:\. On a web server the site root is where the home page resides. In that case, and assuming the pictures folder is also on the site root then an absolute URL is fine.

Be sure not to have space characters in your folder or file names. Use underscores or dashes.

"/pictures_folder/headshot.jpg"
2 Likes