html Having trouble displaying images in html using img tags

[Shammikit]

i have a image in a folder in my pc that i want to display in my web page. i have tried the code below but i havent been successful. what am i doing wrong?

 

<img src="C:\Users\guest\Desktop\folder1\Images\Dell-Vostro-2.jpg" width="200" height="200" />

 

[themctipers]

Sorry no code tags on mobile. 

 

 

<img src="C:\Users\guest\Desktop\folder1\Images\Dell-Vostro-2.jpg" width="200" height="200"> 

I believe that should I work..

 

on mobile it displays :

img

src

 

make sure it's actually just img src (space intentional)

[Shammikit]

3 minutes ago, themctipers said:

Sorry no code tags on mobile. 

 

 

<img src="C:\Users\guest\Desktop\folder1\Images\Dell-Vostro-2.jpg" width="200" height="200"> 

I believe that should I work..

but it hasnt worked for me. when i bring the image to the same folder where the web files are at and reffered to its using its name(Dell-Vostro-2.jpg) then it worked.but i dont want to have all images and web files in one folder because its just messy.

[themctipers]

Just now, Shammikit said:

but it hasnt worked for me. when i bring the image to the same folder where the web files are at and reffered to its using its name(Dell-Vostro-2.jpg) then it worked.but i dont want to have all images and web files in one folder because its just messy.

It doesn't have permission to read from there I believe then..

have it be /photos/Dell-Vostro-2.jpg? 

[TechSquidTV]

What you have should work locally. First thing though, this shouldn't fix your issue but it needs to be done. Don't use the absolute path to the image, try the relative. Where is your index.html file? Inside folder1? If so use this.

 

<img src="/Images/Dell-Vostro-2.jpg" width="200" height="200"> 

Actually... tell me if that just fixes it.

[Shammikit]

1 minute ago, Ampix0 said:

What you have should work locally. First thing though, this shouldn't fix your issue but it needs to be done. Don't use the absolute path to the image, try the relative. Where is your index.html file? Inside folder1? If so use this.

 

<img src="/Images/Dell-Vostro-2.jpg" width="200" height="200"> 

Actually... tell me if that just fixes it.

no its not in folder1 its in a different folder called web pages 

[Cruorzy]

What is your website document root, nest from there. Use Inspector tools to see where he expects the image to be and see if that is correct to your folder structure.

[TechSquidTV]

1 minute ago, Shammikit said:

no its not in folder1 its in a different folder called web pages 

 

 

Ok first thing you should do is organize your project as a real website you be. Try this

 

 /project

     - index.html

     - /img

          - Dell-Vostro-2.jpg

 

So you have a project folder with index.html inside, and another folder inside called "img" which contains our image. Then your one project folder will contain the entirety of the website. From there you can use relative paths. "/" will refer to the project folder from index.html. So "/img/Dell-Vostro-2.jpg" is your image.

[Shammikit]

4 minutes ago, Ampix0 said:

 

 

Ok first thing you should do is organize your project as a real website you be. Try this

 

 /project

     - index.html

     - /img

          - Dell-Vostro-2.jpg

 

So you have a project folder with index.html inside, and another folder inside called "img" which contains our image. Then your one project folder will contain the entirety of the website. From there you can use relative paths. "/" will refer to the project folder from index.html. So "/img/Dell-Vostro-2.jpg" is your image.

This worked. Thank you

[mariushm]

You can't use local paths in html pages.

HTML pages are served to the other user exactly like they are, so the user somewhere at the other end of the world would receive the html file and would try to find c:\users\ .. filename.jpg on his own computer and obviously there's no such file there.

 

There are absolute paths and there are relative paths.

 

When you start a path with the "/" character, this tells the browser that the path is absolute, that the full path where the image is should be formed by appending the value of the src property to the domain name of your website.

For example ... let's say you access the index.html like this

http://www.example.org/project/index.html

Then if you use

<img src="/images/Dell-Vostro-2.jpg" width="200" height="200" />

the web browser detects the first "/" and knows you use absolute paths, so it will try to retrieve the image from the following address:

 

http://www.example.org/images/Dell-Vostro-2.jpg

 

but if you write it like this in your html file :

 

<img src="images/Dell-Vostro-2.jpg" width="200" height="200" />

 

then the path is relative to the path from where index.html is read, so the file will be retrieved from:

 

http://www.example.org/project/images/Dell-Vostro-2.jpg

In your case, it probably worked because index.html was in the root of your website already, so by luck the absolute path and the relative path are the same. In general, you want to use relative paths, because if you'll move the html file at some point somewhere else, you don't have to go edit every image address to correct the paths, they'll remain relative to the path of the html file.

 

Also keep in mind that file names are case sensitive on Linux computers, but they're not case sensitive on Windows machines. So if you have a test web server on your Windows machine the images will load no matter how you write the file path in your src field in the img tags but they may fail to load when you transfer the files to a Linux macine, if the path you entered in the html file is not exactly the same (case sensitive).

To save you the trouble, it's often worth just using only lowercase letters for file names and use only lowercase in html files, because then you don't have to worry about this.

 

 

Also another important thing:

 

<tag_name property="data" property="data">value</tag_name>  <!-- properties/attributes are optional, values are optional -->
                                                                
<p>This is a paragraph. There are no properties for this paragraph. Here comes the end tag. </p>
<p style="font-weight:bold"> This is a paragraph with a property called style.</p>

<!-- 
If a tag has no value or by definition there's no concept of value, it can be shortened, no need to add a </tag_name>, 
just put a "/" character in front of the last ">" character: 
-->

<p />   <!-- Empty paragraph, same as writing <p></p> -->
<hr />  <!-- hr = horizontal ruler, draws horizontal line, no concept of value so no sense writing it as <hr></hr> -->
<br />  <!-- br = break, like the enter key -->

<!-- I'm showing you these because the same applies to img tag .. it has no value, only properties, so you must use that "/" at the end -->

<img src="folder/filename.jpg" ></img>  <!-- this is shortened like this: -->

<img src="folder/filename.jpg" /> <!-- this is the correct way to write the html code, adding the "/" -->