What is the difference between? Thank you.
<img src="images/file.jpg"></img>
between
<img src="/images/file.jpg"></img>
between
<img src="./images/file.jpg"></img>
between
<img src="../images/file.jpg"></img>
You need to learn about relative and absolute paths.
Here are my explanations for your examples, but you realy should read the link in order to understand the concepts.
If the base URL is "http://example.com/resources/" then:
<img src="images/file.jpg"></img>
Will get:
http://example.com/resources/images/file.jpg
It simply adds the src url to the base URL.
<img src="/images/file.jpg"></img>
Will get:
http://example.com/images/file.jpg
Bacuse the image URL is rooted (starts with /) it uses the domain and adds the image src to the domain.
<img src="./images/file.jpg"></img>
Will get:
http://example.com/resource/images/file.jpg
In this case, it uses the relative path for the current directory (.), which is the base directory (resources).
<img src="../images/file.jpg"></img>
Will get:
http://example.com/images/file.jpg
In this case, it uses the relative path for the parent directory (..), which makes it go up a directory and then add the rest of the path.
The first, third and last ones are relative to the current path. In the last one, .. is the parent folder, which means you essentially ascend one level in the hierarchy, and in the second one . is the current folder, making the URI equivalent to the first one. The second one is relative to the root, since it starts with /. Read more about URIs in the HTML4 spec, or in general about Unix-style paths.
Thus, if you're at website.com/folder/folder/index.html, the four URIs would be equivalent to this:
website.com/folder/folder/images/file.jpg
website.com/images/file.jpg
website.com/folder/folder/images/file.jpg
website.com/folder/images/file.jpg
Related
<div class="features__column">
<img class="features__image" src="" alt="Side view of F+F Watch">
</div>
In the code above, I'm trying to insert an image that exists in the same folder, but not in the same sub folder as the hmtl file. So the path would be mainfolder/image/code/htmlfile.
However, writing the file path for the image isn't working (at least I'm not seeing my image when I update the live view), so I'm confused as to what I might being doing wrong.
Update: I've since realized that I wasn't paying attention to how my folder is structured in VS Code. I was able to figure out that my image needed to be written as /image.png.
A single dot represents the current directory, while a double dot represents the parent directory.
./ == current directory
../ == parent directory
Assume you have an image file in the parent directory called "image.png."
You can access it by using the ../ format, so the source value would look like this. ../image.png
<div class="features__column">
<img class="features__image" src="../subdirectory/image.png" alt="Side view of F+F Watch">
</div>
Each time I try to add an image to visual studio code I keep having to inspect and get the entire image source code.
I would like to just use /images/down-chevron.png.
Any help?
Thanks!
Example of my code:
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/down-chevron.png" id="downArrow" onclick="downArrow(
</div>
You're almost there. Just replace the "file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services" with a dot from the src attribute and you'll be good to go.
<img src="./images/down-chevron.png" >
In VS Code, depending on your autocomplete settings, each time you write src, should give you options for autocomplete including the images folder.
You could store the images you'd like to use in a folder called img inside of the folder where your HTML and css live. Then for the img tag in the HTML you could use something like
<img src="./img/down-chevron.png">
The ./ lets you navigate through the working tree. Using ../ would go back two directories if needed.
Im on the page:
example.com/news
It's a list of news articles. Is it possible to set links on each news article and take into account the current url?
link to something
The above will link to:
example.com/news/article
Or will I need to get the entire route and specify that in the link?
The url could be anything eg. /products so I do not want to hardcode it in.
If you need to take into account the current path, use the page name directly in the href attribute:
If you are on example.com/news and used an href value of "article", the URL becomes example.com/news/article.
If you need to reference pages on the root directory, precede the page name with slash '/', href="/article".
Make it relative?
link to something
For some browsers/DOCTYPE, you may have to use this in conjunction with the base tag element, which will need to be added to every page that utilises relative paths:
<base href="http://www.example.com/news">
How do I display an image which is located outside the context root.
i.e the image is located in <jboss_root_folder>/images/myImage.jpg .
How the src of img tag should look like in such case?
Any lead in this regard will be of great help.
The below line works in a html file : <img src="file:///G:/DevEnv/jboss-5.1.0.GA/images/DSCN0968.jpg"> where as the same line from my xhtml does not work when accessed from server
Regards,
Satya
You can either give the full url i.e. http://www.example.com/root/images/myImage.jpg or use relative paths i.e. if root is two levels down from the page location: ../../image/myImage.jpg. For an example, see this page.
<img src="images/logo.gif" />
is equivalent to
<img src="./images/logo.gif" />
But
<img src="/images/logo.gif" />
is different.
Where is the third item looking for logo.gif?
The third one is looking relative to the root of the site, so if you were on a page at:
http://entrian.com/somewhere/page.html
it would look in:
http://entrian.com/images/logo.gif
ignoring the somewhere piece of the page's address.
images/logo.gif
It's relative and means: Go to a folder called images and then get the resource logo.gif
./images/logo.gif
It's relative and means: From the current folder (the dot means this) go to a folder called images and then get the resource logo.gif
As you can see the first two mean the same, finally the last one
/images/logo.gif
It's absolute and means: From the root of the web server or the file system or whatever (the slash means this) go to a folder called images and then get the resource logo.gif
In the document root. The first two are relative paths, while the last is an absolute path.