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.

37 Likes

Really helpful tips for future organize.

13 Likes

Supa, Dupa helpful hints and tips!!!

5 Likes

thank you very much .

1 Like

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?

13 Likes

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.

19 Likes

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

6 Likes

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.

32 Likes

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

6 Likes

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.

12 Likes

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"
13 Likes

Hi, Roy. I have two questions.
In terms of this topic, if the image is stored in the local drive, will the remote server actually store all of the data(including everything of this website, like HTML, CSS, Javascript and the same image copy) in the related database? In other words, the remote server completely backed up the information in my computer hard drive. When others access this website I created myself, the remote server will pull the information from the related database to respond back. This process has nothing to do with my computer, and deleting this image from my hard drive will not affect the website. is my understanding correct? :thinking:

In addition to this, what if my computer is the server for the website I created myself? In this case, if I delete the image from my hard drive, would that mean people viewing the website can not see this picture?

2 Likes

Please do not confuse the hosting platform (the namespace where your site resides) with a database (the repository where your data resides). We can have a fully functioning website without a database. HTML is on the very surface, static. It’s raw text that is later parsed for recognizable keywords that can be tokenized. It’s how BASIC used to work in the 8-bit environment. You’d type the keyword and then peek where it got inserted in memory and always it would be a two byte token. Probably just imagining that HTML works like this, so take it as you might.

As for where our own computer fits this picture? It doesn’t. It is an FTP or other client that occasionally feeds new data to the server. All the other data is coming from the users.


Not plausible. It wouldn’t even take a DDOS attack to bring it down. It’s own hardware deficiencies would do it.

5 Likes

Hi Roy, could you please explain this in detail? I wonder why there is no connection between the local drive and the server. And if the image is stored in the local drive and I delete the image later from my hard drive, how the client can see that image when browsing the webpage?

I’m sorry that your previous explanation is a little difficult to understand. I’m still a newbie :sob:

2 Likes

We do not serve images from our own local machine. Using an FTP client (or some other secure client) we upload images to the server. It is the files installed on the remote site that are served to visitors. Once the files are on the server they are there permanently, or until they are removed from there. What we do with the files on our local drive has zero effect on the server. They have no connection.

11 Likes

That’s really helpful. Thank you :smiley: :smiley: :smiley:

1 Like

Now, Here is some things need to discuss…
I am using win10 OS…And here you can link your local image using 2 methods…
1. dot.html file and your picture are in the same folder. Then code is like this…

<img src="IMG_5124.jpg">

2. dot.html and your picture are in a different folder but…the folder is the sub-folder where you put the HTML file…E.g:

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

Unfortunately, when I put the picture in another drive it doesn’t render in firefox, chrome etc.

Dear @rubyslayer42889,

As mentioned by @methodsurfer83232, link to [chapter] seems to be broken. Nowadays, I’ve learned to develop (or design, whichever one suits the best) Wordpress sites “locally” using MAMP PRO (I work with Apple computers) and uploading the results afterwards using Duplicator (Wordpress plugin).

Thing is that I thought that I would have problems because of all this issue of “relative versus absolute paths” once I put my sites online, but Wordpress seems to work it out on its own as long as I upload media thru the media option available in Wordpress and not to a local folder of my creation.

I now wonder how it’ll play out once I start creating a site from scratch not using Wordpress, and any kind of information regarding this whole issue of “relative versus absolute paths” would be highly appreciated, in case you can renew the link or offer some additional resources.

Other than that, I’ll definitively google my soul away :sweat_smile:

Thanks in advance, though.

Cheers.

1 Like

The domain URL is an absolute path the the site root, Home.

www.example.com/

DNS servers resolve the domain to an IP and the request is resolved by the server to the default home page.

Locally (on the site) we don’t ever need to use the domain in our URLs.

<a href="/" title="Home Page">Home</a>

That is an absolute path to the default home page.

By design, every folder has an index.html (or .php, etc.) page, including asset folders so the contents cannot be listed. That being the case we can access the index of any folder just with an absolute path to the folder…

<a href="/products/" title="product catalogue">Catalog</a>

This assumes that products is a folder on the site root and that it has an index.ext page.

When we are inside a folder, the relative path to the parent folder is,

<a href="../" title="up one folder">Parent Directory</a>

The easiest way to distinguish relative from absolute is that absolute always begins at the root, whereas relative always begins on the current page and traverses up to the folder that contains the target, or target folder, then into that folder.

5 Likes