I have just uploaded two images to my website in "images" folder. I'm trying to display them using img tag -but all I'm getting is broken tag. So I have tried to open the image in a new tab using it's URL. But the URL kept on loading forward and backward and finally stopped displaying a blank page. Please help
<img src="images/guestbook4.jpg" width="129" height="63" name="MyImage5">
Here's the URL to the image I've uploaded
your image directory is in the root. so you can access to it from the root or from the current path.
when you set image src to example/avatar.png, that means, example folder exist in current path. so the request will send to example directory in current path. if your code file not be in the same directory that example directory exist in, this problem occur.
if you use /example/avatar.png, that means, example folder exist in root. so the request will send to example directory in root path.
Related
i have multiple folders with other htmls, i want to link them all between each other.
folder structure looks like this:
Main Folder
index.html
nav.js
Project Folder
project1.html
project2.html
images
image1.png
image2.png
this is how i try to link:
index.html:
project1.html: <img src="./images/image1.png> <script src="./nav.js">
it works with visual code live, but doesn't work when i open just index.html.
i get error for not loading neither image or script, and when i press on a i get another error of page not found.
i want to figure out what is proper way of linking items inside multiple folders and in which case i have to use "./" or "/" and if there is anything else.
When you start a URL with "/", it goes to the very beginning (root) of the path.
When using VSCode Live Server, it runs a local server which has a root path of the directory you have open in VSCode. With live server, you will have a URL like localhost:5000/index.html. As the root path is in the same location where the index.html is located, you can just type /index.html to access it.
When you manually open the index.html, the root directory changes to the root of the drive you have the file located in (e.g. C:). If you open the file manually, your web browser is opening something like C:/Users/User/Desktop/Website/index.html. If you were to try access /index.html, it would then go to C:/index.html on your hard drive.
If you are trying to access a file that is in the same directory as the current html file you have open, you want to remove the / from the beginning of the URL.
If you are wanting to access a file that is accessible from the parent directory, you want to have it start as ../
To make what you currently have work when you directly open the .html file, make the following changes:
index.html
Before:
After:
project1.html
Before: <img src="./images/image1.png"> <script src="./nav.js">
After: <img src="../images/image1.png"> <script src="../nav.js">
i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.
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.
I'm having trouble getting an image loading on my website.
When I had the "images"-folder in the same folder as my html this code managed to load the image successfully.
<img src="/images/progressive.jpg" width="400" />
However, I want to put the "images"-folder up one directory. So I move the folder and change the path to:
<img src="../images/progressive.jpg" width="400" />
but it fails to load, any idea why that is?
My vs code extension is "autofilling" the path so it recognize the file, which should mean that the path is correct.
I just found the issue. I'm using the VS code extension "Live server" which seemingly can't find files up one directory. When I open the .html file from the file explorer instead of using the "Live server" the images load successfully.
Location of image defined as /images/progressive.jpg for current page location https://website.com/path/subpath/page.html will use full image address as https://website.com/images/progressive.jpg
But, for location of image defined as ../images/progressive.jpg and the same page location (https://website.com/path/subpath/page.html) you will receive image address https://website.com/path/images/progressive.jpg
Maybe this is a problem?
I am using the following code to display the image on my website:
<img src="/logo.jpg" alt="Image1">
The image is on my hard drive. However, the image is not displayed.
I have searched all over the internet and check the folder and path to be correct. The image is in the same folder as my HTML file.
I tried to upload the image in google drive and google photos and provide the HTML link however still I could not be able to display the image in both Chrome and IE.
Can anyone explain what can be the solution?
Is your image stored in the OS root directory?
If it's in the same folder as the html file then you want to remove the / at the beginning (or change it to ./)
/[filename] means file at the root of the OS/server (analogous to C:/ in Windows)
./[filename] means file in the current working directory (as does just [filename])
../[filename] means file in the parent directory