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.
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 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"/>
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 ?
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.