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.
Related
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.
I have problems with img tag in HTML. I try to use relative path and absolute image file path like this:
<img src="../../images/pages/404-page/bg-construct-image.jpg"/>
<img src="D:\Web_HomeOWN\images\pages\404-page\bg-construct-image.jpg"/>
But this image didn't display. When I inspect img element with firefox and I try to click at the image path.
Then I got this path: file:///images/pages/404-page/bg-construct-image.jpg
The right path would be like this: file:///D:/Web_HomeOWN/images/pages/404-page/bg-construct-image.jpg
My local image path: D:\Web_HomeOWN\images\pages\404-page\bg-construct-image.jpg
My local html path: D:\Web_HomeOWN\Index.html
My folder structure
Based on your structure, you don't need to navigate up two folders, as your index.html is already in Web_HomeOWN. Simply referencing <img src="images/pages/404-page/bg-construct-image.jpg"/> should do the trick.
../ is used to come backward from the location of html file. In your case image file is actually located in sub-directory of your html file, So you need not to use ../. You can use img as follows.
<img src="images/pages/404-page/bg-construct-image.jpg"/>
I have put the path as you can see but when I load this code on my site it actually doesn't display the background for some unknown reason.
Here is what I see on the site :
please try using the relative path like this: "../images/page-background.png"
regards,
It looks like your background-image-url line is pointing to the following directory. root/resources/styles/Webstar-Website/resources/images/page-background.png
Instead you'll want to use this url. ./images/page-background.png
In CSS all directories that you use are relative to the location of the file you are editing. If you were to move your CSS file, you would have to rewrite the directories.
background-image: (images/page-background.png);
You can use absolute path to be sure, and clear you cache
background-image:url("http://www.site.ext/Webstar-Website/resources/images/page-background.png");
It's look your URL is wrong, try this
background-image : url("http://yourwebsitedomain/resources/images/page-background.png") ;
Or you can using relative path instead to call the image
background-image : url("../images/page-background.png") ;
add a \ before your address
it refers to root of the structure you choose for the project
I was working with the image tag in HTML.I had a line in my file:
<img src="Static_Content/img1.png"/>
The code rendered the image in the browser. However, when i changed the folder name to Static-Content the image was not rendered. The equivalent line of code was changed to:
<img src="Static-Content/img1.png"/>
I am curious to know as to how the introduction of - in the folder name restricted the use of the image. Also, what are the other restrictions ?
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