Suppose I have a folder named Imp and in it,I have a webpage folder and a images folder.I have my webpage in webpage folder and my images in images folder. So, how can I give the path of an image s4.jpg present in images folder from a webpage in webpages folder..i mean what should I write in the src attribute of img tag?
You have two kind of path to access your image :
Relative src="../images/s4.jpg" (up to parent is relative from where your page is display, here the page is run from direct sub directory).
Absolute src="/images/s4.jpg".
If In documents folder of c drive you have made a folder imp and in the imp, you have made another folder named - "images"
then your code should be -
<img src="../imp/images/filename.ext>
Related
I have an image in a folder "image" and my html page in another folder "Source-Code". How can I provide the link of the image in my html page as a relative path and not absolute path.
**Note:
The html page is inside another folder so please provide your suggestions accordingly.
Simply copying the relative path of the image is not working.
I dont need the absolute path (as i need to transfer the code so the absolute path will keep on changing)**
You need to use two dots (eg "../") to go up one directory and then you can access your images directory to get the image.
<img src="../images/imgname.png">
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.
I have zip folder that has my 4 html pages, 1 css style sheet and 1 javascript file. I also have an image folder which stores all my images I use in the webpage. However, When I go to open the browser say for example "home.html" inside the zip folder the images are not appearing.
However, when I have the folder unzipped it works fine.
Why does zipping the folder cause images to go weird?
This is my image:
folder here
Zip file is not a folder. It's a file. It's not the same kind, it should be handled different way.
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.
When taking a look at the html for this site: http://www.3lateral.com/
I saw that all of the images like logos, apple-touch-icons, mstiles etc. were all located "on the site" like so:
<meta name="twitter:image:src" content="http://www.3lateral.com/img/seo-logo.png">
<meta name="msapplication-TileImage" content="http://www.3lateral.com/mstile-144x144.png">
How did they do this and how can I do this myself?
...Also it seems that some are located under a url path like the twitter one (/img/seo-logo.png), how is this connected?
http://www.3lateral.com/img/seo-logo.png is called the absolute path and /img/seo-logo.png is called the relative path(relative to your current file being called from).
You can access the same image using both. Meaning http://www.3lateral.com/img/seo-logo.png is the same as /img/seo-logo.png.
Usually it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
In your case, say you have an img/ folder & a css/ folder in your root directory. Now when refering to an image in the img/ folder from say main.css in your css/ folder. You can use:
www.yourdomain.com/img/thisimage.png(finds the path from root ie. www.yourdomain.com)
OR
../img/thisimage.png(this finds the path of the image from your main.css instead of root directly). ../ means "travel one directory up from the current"
just copy your image in the site directory with specific name that you want , then set the path that started with your site address / image directory / image name
e.g : if you copy your images in image directory of your site path , set the src of image tag >
like : ( src="http://www.yourdomain.com/image/yourImageName.png" )