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" >
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.
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 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\
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.