I'm new to HTML and I had a question about accessing files with pictures.
I know that, to access the pictures that are within other folders, the code looks something like what is shown below and my HTML file would be right before the pictures file:
<img src="pictures/mountain.jpg" alt="mountain"/>
My question is: how do I access pictures that are placed in files that are outside of my HTML file? How do I link a picture but backwards through a file that is the file that holds these files?
Do you mean going up a folder?
<img src="../pictures/mountain.jpg" alt="mountain"/>
Also, if you wanted to go up an additional folder you would do this:
<img src="../../pictures/mountain.jpg" alt="mountain"/>
The files you want to refer to in a html file, being images or other html files or JavaScript files, must be within the root of your server. So if the root of your server is c:\users\httpserver and you want to link to an image in c:\users\kristy\pictures\mountain.jpg, the answer is that it is not possible, you will need to copy the file to a Directory within c:\users\httpserver and link it either relatively, as ketchupisred showed or absolutely.
i.e if the html-file is located in c:\users\httpserver\html and the picture is c:\users\httpserver\pictures\mountain.jpg, either
<img src="/pictures/mountain.jpg" alt="mountain"/>
note the starting / that refers to the root of the server or
<img src="../pictures/mountain.jpg" alt="mountain"/>
the .. taking you one Level up before going into the pictures folder
Since going up one or two folders has already been explained, I'll just add that if you want to access a file in the root directory you can do this:
<img src="/pictures/mountain.jpg" alt="mountain"/>
Related
Why won't my images from my computer show up in my html file I had no issue using images from the web using the url. I saved my html file, css and images all in on folder but it doesn't show up on the website. This is the code I used using Sublime Text Editor.
<div>
<img src="/images/profile-pic.jpg"/>
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
Another easy way to do this.
Go to your files on your system, navigate to the folder where your image is stored right click and click properties then copy out the address there.
Just give a correct path of the image in the html file and remove the forward slash (/) behind the path.
Most likely you're in a new directory and need to come back up one level. You could try:
<img src="../images/profile-pic.jpg"/>
Now on folder structure, this is how you arrange your documents.
First create a folder for your entire website. Let's call it "Codes"
Then in codes add the HTML file and name it "index"(easier for the browser to recognize when hosting) the along side the index create another folder for your additional material. Example images, font files, CSS files,videos and lot more. Name the folder asset. Then in asset, create a folder for keeping the images only, another for CSS files and another for font files.
Then you are done
Copy address from the first folder created( this is easier)
Now you provided screenshots, I can try to help better. In the folder tree, you can see folder named Portfolio and folder named Images are on same level. Because of this, when you are inside of folder Portfolio, you should navigate one level up.
Please try to use
<img src="../images/profile-pic.jpg">
relative file path explanation
in the above website, the following example is given to demonstrate relative file path for the image: <img src=”banana.jpg” and there is no / in front of banana because the "image is placed at the same directory where source file is"
in the html tutorial on youtube (1:13:01) that i'm learning from, the images are also placed at the same directory where source file is but a / is used in front of the image name. why was / used here?
Does it have to do with "root of the current web" as stated in the w3 html file path tutorial? If yes, what does "root of the current web" mean? i can't find any explanation that relates to html
A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure.
It’s an important thing to know the path of files which are going to include in web pages.
Examples
In html here is a syntax to include image files in webpages
keep in mind that the img tag is used to insert images as followsand to insert image file in a web page its source must be known.
<img src ="path" alt ="some text here">
/*
alt attribute is used to specify an alternate text for an image, if the image cannot be displayed
path describe the location of the image file in a website folder.
*/
Different ways to specify file paths are
<img src=”img_name.jpg”>:
//It specify that our image is located in the same folder as the current page.
<img src="images/image_name.jpg">
//It specify that our image is located in the images folder in the current folder.
<img src="/images/image_name.jpg">
//It specify that our image is located in the images folder at the root of the current web.
<img src="../image_name.jpg">
//It specify that our image is located in the folder one level up from the current folder.
In the above example, the public_html folder is the root directory of the website and the index.html file is executed when someone navigates to the homepage of the site (www.example.com).
Hops you' have get an idea
The explanation is available at Difference between links with forwards slashes and relative links
It is going to be easier to understand the concept if the image is located in another folder rather than the main root. For instance, a folder named as "img"
So in your example, <img src=”img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then in the img folder, then for the file itself.
<img src=”/img/banana.jpg”> indicates that
This would look at the root of the site's hosting, then find an img folder, then for the file itself.
<img src=”../img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then go "back" one folder into the parent folder, then look for a img folder, then for the file itself.
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
so i'm fairly new to html, so i have always just left everything in the same folder so i don't have to link things but am making a professional website for myself and portfolio. so i want to sort my files properly.
so lets say i have a folder called website, then in that folder i have 3 folders, html, css and images. my html documents are in the html folder what do i do to link images from the images folder in the html document that is in the html folder. pleas note that images isn't a sub folder of html they are both sub folders of website.
any help is helpful (self explanatory i know)
If the html folder and images folder are siblings, the path from a file in the html folder to an asset in the images folder would look like this:
"../images/mypic.jpg"
You can do this in the html page by adding the img tag:
<img src="../images/yourImage.png" alt="" />
But the better method would be to use CSS:
<img alt="" />
img {
background-image: url("../images/yourImage.png");
}
Notice that the "../" is used to go up one level from the current directory of your html page or css file.
You can simply prepend your urls with / which will always reference the root folder of your website.
Assuming yoursite.com loads the folder contents of website, you can link to files in the images directory like this:
/images/image.jpg which will produce http://yoursite.com/images/image.jpg
Example:
<img src="/images/image.jpg" />
There are various ways that the links could work whether from the root:
<a href="http://www.yourdomain.com/images/image.jpg">
Or perhaps once you get a little more experienced with managing your folders, you can set them up a little more dynamic (making them automatically work on live/development transfers):
<a href="images/image.jpg">
Does that help?
PS: The html or public_html folder is typically your root with a host, meaning you don't need to includ this in your paths. Consider whereever your functional index file is the root folder.
U can use .. to go to previous folder.In your case while pointing path for images in html file you can do as metioned below.
If the image is within the same folder then just use:
<img src="image.jpg">
If the image is within a sub folder then just use:
<img src="subfolder/image.jpg">
If the image is within a parent folder then just use:
<img src="../otherfolder/image.jpg">
or if it is just located in the parent folder
<img src="../image.jpg">
This is going to explain it in detail:
http://www.htmlkit.com/minit/pages/imgtag1.html
I'm kind of new to HTML. I'm trying to display an image on my website but for some reason, it just shows a blue box with a question mark in it. I've looked everywhere on the internet, but none of the solutions seemed to work for me. I've tried:
<img src="iwojimaflag.jpg"/>
<img src="images/iwojimaflag.jpg"/>
<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>
Just to expand niko's answer:
You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src. Example:
Relative location:
<img src="images/image.png">
The image is sought relative to the document's location. If your document is at http://example.com/site/document.html, then your images folder should be on the same directory where your document.html file is.
Absolute location:
<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">
or
<img src="http://another-example.com/images/image.png">
In this case, your image will be sought from the document site's root, so, if your document.html is at http://example.com/site/document.html, the root would be at http://example.com/ (or it's respective directory on the server's filesystem, commonly www/). The first two examples are the same, since both point to the same host, Think of the first / as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.
Regarding /, . and ..:
The / symbol will always return the root of a filesystem or site.
The single point ./ points to the same directory where you are.
And the double point ../ will point to the upper directory, or the one that contains the actual working directory.
So you can build relative routes using them.
Examples given the route http://example.com/dir/one/two/three/ and your calling document being inside three/:
"./pictures/image.png"
or just
"pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/three/.
"../pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/.
"/pictures/image.png"
Will try to find a directory named pictures directly at / or example.com (which are the same), on the same level as directory.
Lets look at ways to reference the image.
Back a directory
../
Folder in a directory:
foldername/
File in a directory
imagename.jpg
Now, lets combine them with the addresses you specified.
/Resources/views/Default/index.html
/Resources/public/images/iwojimaflag.jpg
The first common directory referenced from the html file is three back:
../../../
It is in within two folders in that:
../../../public/images/
And you've reached the image:
../../../public/images/iwojimaflag.jpg
Note: This is assuming you are accessing a page at domain.com/Resources/views/Default/index.html as you specified in your comment.
img {
width: 200px;
}
<img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>
<img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>
<img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>
please see the above code.
If you put <img src="iwojimaflag.jpg"/> in html code then place iwojimaflag.jpg and html file in same folder.
If you put <img src="images/iwojimaflag.jpg"/> then you must create "images" folder and put image iwojimaflag.jpg in that folder.
I confess to not having read the whole thread. However when I faced a similar issue I found that checking carefully the case of the file name and correcting that in the HTML reference fixed a similar issue.
So local preview on Windows worked but when I published to my server (hosted Linux) I had to make sure "mugshot.jpg" was changed to "mugshot.JPG". Part of the problem is the defaults in Windows hiding full file names behind file type indications.
Here are the most common reasons
Incorrect file paths
File names are misspelled
Wrong file extension
Files are missing
The read permission has not been set for the image(s)
Note:
On *nix systems, consider using the following command to add read permission for an image:
chmod o+r imagedirectoryAddress/imageName.extension
or this command to add read permission for all images:
chmod o+r imagedirectoryAddress/*.extension
If you need more information, refer to this post.
I found that skipping the quotation marks "" around the file and location name displayed the image...
I am doing this on MacBook....