I have a general question (I'm not all to familiar with html).
The following use of the slash I have discovered points to a sub-directory, in this case for Images:
/Image/my_Image.png
Is there an html equivalent for pointing to a parent directory?
../ will give you one level higher parent directory. You can use as much as you want to go higher level parents like ../../
../Image/my_Image.png
will be Image folder in parent directory
Single dot = current directory, double dot is parent directory...
./ = current
../ = parent
So let's say you have a style rule for an image in a CSS file called "styles.css".
The location of the stylesheet is C:\MyApp\CSS\styles.css.
The location of the image is: C:\MyApp\Image\my_Image.png.
When the CSS is being read, it will be the location of that css file that's used for the current location. So if you want to get to your image, you can point it like this:
background: url("../Image/my_Image.png") no-repeat scroll 0 0 transparent;
If the location of the image would have been directly on C:\, you would have to go back two parent directories:
background: url("../../my_Image.png") no-repeat scroll 0 0 transparent;
This principle also goes for JavaScript files and so on.
It works perfectly also together with a <base> tag;
example
<head>
<base href="resources\">
</head>
then from the root index: sample1
<head>
<base href="..\resources\">
</head>
then from the template: <img src="images\sample1.jpg">
working with a directory structure like:
index.html
resources\template\
resources\images\
Related
I am using notepad ++ for starters. I created a parent folder in my documents where I save my code, within that folder I created a subfolder to store images.
Below is the code I am using
<section>
<img src="img/vietnam.jpg"
</section>
Why won't it display? I have named the image vietnam.jpg in my subfolder :S
Here the issue it could be because your are not getting to the right path where your image lives.
If you have, for instance, your html file contained in a folder which is at the same level of your img folder then you should add ../ in order to get up one level and then specify which folder you would like to get into, in this case img folder.
Ex.:
<section>
<img src="../img/vietnam.jpg" alt="vietnam">
</section>
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
If your HTML source file (e.g. index.html) is in the folder c:\Users\Patricia\Documents\adv, then as your img folder is a subfolder of \adv, the following should work.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<img src="img/vietnam.jpg" alt="vietnam">
</section>
</body>
</html>
What is the path to your HTML source parent folder?
Well, first of all i would suggest you to switch your code editor (e.g. to VisualStudio code as it is one of the editors used/preferred widely in the industries. Of course there's other Editrs/IDE's like WebStorm and so on ). Basically with the right plugins/configurations you will fasty become a superhero. For example, look at the screen below. I used relative path in VisualStudio and it shows the current path you're currently in.enter image description here
you are missing the closing bracket of img-tag, which leads to invalid html that cant be displayed properly
look at the example https://www.w3schools.com/tags/tag_img.asp
<img src="/img/vietnam.jpg" >
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"/>
Lets say I have a filestructure:
index.html
css/styles.css
images/paper.gif
subfolder/index.html
css file called styles.css, located in a folder called css/styles.css containing
.image{
background-image: url("images/paper.gif");
background-color: #cccccc;
}
If I include this file in a index.html located in root directory the image will show.
Now lets say I have another folder called subfolder/index.html and want to inlcude that css ../css/styles.css file then that url to the image wont work since the css file is expecting that there would be a folder called images in "subfolder" with a file in it. So in order to avoid having to declare 2 classes containing the same code, is there another way of dealing with this problem?
Thanks in advance.
It should work for root and sub folders index file..
.image{
background-image: url("../images/paper.gif");
background-color: #cccccc;
}
But check path of included CSS in Index file.
it should be For Root index file
<link rel="stylesheet" href="css/style.css">
and for sub folder index file.
<link rel="stylesheet" href="../css/style.css">
The only way is with absolute paths. This means that in your CSS you must define an absolute path for your images, for example:
background-image: url(/images/image.png);
What's the problem? You need to know the absolute path where your folders are. For example, if you have this URL: http://localhost/myFolder/images/image.png, your CSS will be:
background-image: url(/myFolder/images/image.png);
But when you upload it to a production server like this: http://myserver.com/images/image.png, your CSS must to change to something like this:
background-image: url(/images/image.png);
So the best way is to develop in the same environment that your production server. This will be with the URL http://localhost/images/image.png (develop) and http://myserver.com/images/image.png (production).
Another way is to making friendly URLs, that avoids to you to make custom folders, and you can have all in one folder and the URLs will be rewrited by the server.
Good luck.
directory structure:
htdocs
index.php
cms.php
images/
image.jpg
otherpic.png
content/
home.php
otherfile.php
/content/home.php contains LOADS of images. It will be included in index.php, so take note that the src only has one dot, because its read from inside index.php:
<img src="./images/image.jpg"></img>
Now cms.php holds an iframe. The iframe is supposed to be the rich text editor so that home.php can be editted.
Which brings me the following problem: When I want to load home.php inside the iframe the image sources needs to have two dots,
<img src="../images/image.jpg"></img>
because home.php is inside /content/ so the iframe will see /content/ as is its parent directory, Not /htdocs/.
How do I make the images show inside the iframe/text editor AND index.php?
Just change the path to reference the web root so you don't have to adjust the tag for different directories:
<img src="/images/image.jpg" /> (No dots at the start of path)
To elaborate on the dots, the single dot . represents the current directory and the .. represents one back from the current directory. The / at the very beginning goes back to the webroot.
And, by the way, the <img> tag doesn't have a closing </img> tag; you have to leave the tag without the closing tag or use the self closing / as I've done above.
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.