html image source meaning of /

Question

in the above website, the following example is given to demonstrate relative file path for the image: <img src=”banana.jpg” and there is no / in front of banana because the "image is placed at the same directory where source file is"

in the html tutorial on youtube (1:13:01) that i'm learning from, the images are also placed at the same directory where source file is but a / is used in front of the image name. why was / used here?

Does it have to do with "root of the current web" as stated in the w3 html file path tutorial? If yes, what does "root of the current web" mean? i can't find any explanation that relates to html

Check out this thread here, should answer your question. [Why would a developer place a forward slash at the start of each relative path?](https://stackoverflow.com/questions/7613274/why-would-a-developer-place-a-forward-slash-at-the-start-of-each-relative-path) — Savageville, Sep 16 '21 at 18:41
"This allows one to move a file around and not have to change the links to the different resources." -> but i moved my html file to the folder (do i call this the parent folder?) before the current folder it is currently stored in and the image stopped loading although i added "/" in the front of the file path — nubprog, Sep 16 '21 at 18:57
**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. [ask] — Rob, Sep 16 '21 at 20:44

score 2 · Answer 1 · answered Sep 16 '21 at 19:10

2

A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure.

It’s an important thing to know the path of files which are going to include in web pages.

Examples In html here is a syntax to include image files in webpages

keep in mind that the img tag is used to insert images as followsand to insert image file in a web page its source must be known.

  <img src ="path" alt ="some text here">
  /*
    alt attribute is used to specify an alternate text for an image, if the image cannot be displayed 

path describe the location of the image file in a website folder. 
    */

Different ways to specify file paths are

<img src=”img_name.jpg”>: 
//It specify that our image is located in the same folder as the current page.

<img src="images/image_name.jpg"> 
//It specify that our image is located in the images folder in the current folder.

<img src="/images/image_name.jpg">
//It specify that our image is located in the images folder at the root of the current web.

<img src="../image_name.jpg"> 
//It specify that our image is located in the folder one level up from the current folder.

In the above example, the public_html folder is the root directory of the website and the index.html file is executed when someone navigates to the homepage of the site (www.example.com).

Hops you' have get an idea

answered Sep 16 '21 at 19:10

willy

249
3
12

`src="/images/image_name.jpg"` i added a forward slash in the front like this code and moved my html file to the folder before it and the image doesnt display. since i used a `/` in the front, shouldnt the image display no matter where i move my html file to? – nubprog Sep 16 '21 at 19:16
@ nubprog did u specify location of your image and the image extension ? – willy Sep 16 '21 at 19:21
the html is originally located in the `html` folder in this path `C:\Documents\js\html` and the image is located in `C:\Documents\js\html\images`. I used `src="/images/pic.png"` and it works. However, when i shift the html file to `C:\Documents\js` (the folder before the `html` folder), the image doesn't display with `src="/images/pic.png"` – nubprog Sep 16 '21 at 19:30
@nubprog why you decided to shift the file here C:\Documents\js ? – willy Sep 16 '21 at 19:49
Note that you are using the terms "folder" and "directory" inconsistently. Folders are a Windows concept and not the same thing as a directory. – Rob Sep 16 '21 at 20:46
@JustinWilliam the thread posted by savageville above mentioned that by having `/` in front, "No changes would be needed for with the original rooted path". I wanted to see for myself so i shifted the html file to C:\Documents\js – nubprog Sep 17 '21 at 01:55
@Rob in which way am i using it inconsistently? folder = a folder in windows while directory = the file path. am i right – nubprog Sep 17 '21 at 01:56
@nubprog A pathname is not a directory. A directory contains an index to resources. On the internet, directories follow the Unix method. A Windows "folder" is a simple concept for user content and is not necessarily an index. Too much to explain in the comments here but I'll look for my link to explain the fundamentals. – Rob Sep 17 '21 at 08:49
@nubprog Not the link I was looking for but don't have time to look for the better one I had [Difference between a directory and a folder](https://stackoverflow.com/questions/5078676/what-is-the-difference-between-a-directory-and-a-folder) – Rob Sep 17 '21 at 09:28

score 0 · Answer 2 · answered Sep 16 '21 at 19:29

The explanation is available at Difference between links with forwards slashes and relative links

It is going to be easier to understand the concept if the image is located in another folder rather than the main root. For instance, a folder named as "img"

So in your example, <img src=”img/banana.jpg”> indicates that

This would start in the same folder as the current HTML file, then in the img folder, then for the file itself.

<img src=”/img/banana.jpg”> indicates that

This would look at the root of the site's hosting, then find an img folder, then for the file itself.

<img src=”../img/banana.jpg”> indicates that

This would start in the same folder as the current HTML file, then go "back" one folder into the parent folder, then look for a img folder, then for the file itself.

root of the site's hosting = the folder which stores the `img` folder? — nubprog, Sep 16 '21 at 19:33

html image source meaning of /

2 Answers2