relative file path explanation
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
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
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.
Related
code:
Why am I not able to see any image here to open amazon?
NOTE: image is saved as th.jfif on my desktop and not in any folder
was expecting to see the image
The issue you are having is very likely due to your image not being in the correct location from where your img is expecting it to be.
I would say take the image from your desktop and place it in a folder, maybe called site. Then put your HTML file and image file in the same site folder and load your page again. Then your path mapping should be accurate and your image will render.
I say it is your path mapping because rendering your HTML link using an online image works just fine.
<img src="https://turnerduckworth.com/sites/default/files/styles/case_study_single_image_s_2x/public/2019-03/5_Amazon_Lettermark_2560.jpg?h=a92f03cd&itok=2nBmNv14" alt="website" width="100">
Surely this is to do with having no file or folder structure. Your image and web page must be detailed relatively to each other.
<img src=" path to the image from the web page location ">
If your web page has a folder with it called images and inside it are all your.... images.
The path will be
src="images/picture-title.jpg"
Read about file structure. To begin with, put your web page inside a folder of it's own and also in that folder create an images folder.
I suspect the path does not match the location of the image you saved. the whole tutorial is on here .
for the example, you saved your image in path images , so you should should type it like this:
<img src="/images/th.jfif.jpeg">
and don't forget to write down the image file extension clearly. hope its help
I have just uploaded two images to my website in "images" folder. I'm trying to display them using img tag -but all I'm getting is broken tag. So I have tried to open the image in a new tab using it's URL. But the URL kept on loading forward and backward and finally stopped displaying a blank page. Please help
<img src="images/guestbook4.jpg" width="129" height="63" name="MyImage5">
Here's the URL to the image I've uploaded
your image directory is in the root. so you can access to it from the root or from the current path.
when you set image src to example/avatar.png, that means, example folder exist in current path. so the request will send to example directory in current path. if your code file not be in the same directory that example directory exist in, this problem occur.
if you use /example/avatar.png, that means, example folder exist in root. so the request will send to example directory in root path.
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
so i'm fairly new to html, so i have always just left everything in the same folder so i don't have to link things but am making a professional website for myself and portfolio. so i want to sort my files properly.
so lets say i have a folder called website, then in that folder i have 3 folders, html, css and images. my html documents are in the html folder what do i do to link images from the images folder in the html document that is in the html folder. pleas note that images isn't a sub folder of html they are both sub folders of website.
any help is helpful (self explanatory i know)
If the html folder and images folder are siblings, the path from a file in the html folder to an asset in the images folder would look like this:
"../images/mypic.jpg"
You can do this in the html page by adding the img tag:
<img src="../images/yourImage.png" alt="" />
But the better method would be to use CSS:
<img alt="" />
img {
background-image: url("../images/yourImage.png");
}
Notice that the "../" is used to go up one level from the current directory of your html page or css file.
You can simply prepend your urls with / which will always reference the root folder of your website.
Assuming yoursite.com loads the folder contents of website, you can link to files in the images directory like this:
/images/image.jpg which will produce http://yoursite.com/images/image.jpg
Example:
<img src="/images/image.jpg" />
There are various ways that the links could work whether from the root:
<a href="http://www.yourdomain.com/images/image.jpg">
Or perhaps once you get a little more experienced with managing your folders, you can set them up a little more dynamic (making them automatically work on live/development transfers):
<a href="images/image.jpg">
Does that help?
PS: The html or public_html folder is typically your root with a host, meaning you don't need to includ this in your paths. Consider whereever your functional index file is the root folder.
U can use .. to go to previous folder.In your case while pointing path for images in html file you can do as metioned below.
If the image is within the same folder then just use:
<img src="image.jpg">
If the image is within a sub folder then just use:
<img src="subfolder/image.jpg">
If the image is within a parent folder then just use:
<img src="../otherfolder/image.jpg">
or if it is just located in the parent folder
<img src="../image.jpg">
This is going to explain it in detail:
http://www.htmlkit.com/minit/pages/imgtag1.html