I'm having trouble referencing back to parent folders using html. Here is a picture of my folder:
The below code is index.html:
<html>
<title>HTML Experiments</title>
<h1>This is a website that I made</h1>
<ul>
<li>Here is another file: another file</li>
<li>Here is an extra file: extras</li>
</ul>
</html>
Here is insideextras.html:
<html>
<h1>it worked!</h1>
<p>here you can go back to index: index</p>
</html>
Index.html works OK and I can access insideextras.html from there, but when I try to go back to index.html it doesn't work. Any suggestions?
You got an extra dot.
Just fix
<p>here you can go back to index: index</p>
to
<p>here you can go back to index: index</p>
First, remove all spaces in folder's and file's names. make their names as one word or use - or _ to connect words. anyway, don't leave any spaces in the names. for example your folder name will be extra-1
then use one of these ways according to your folder or file location:
1-
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page.
2-
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder.
3-
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web.
4-
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
Related
I have my css which contains a class
.Img{
background: url('../assets/Trump.png');
}
And the html looks like this :
<div class="Img">
But when I want to have it like this
<div class="Img" style="background: url('../assets/Trump.png');">
the image won't load for me and I get an error
>GET http://localhost:8080/assets/Trump.png 404 (Not Found)
I am working with vue.js 2.0 and webpack
The main issue here is relative paths.
If you have this structure for example:
/page.html
/static/
/assets/
/Trump.png
/css/
/file.css
And inside your page.html you have a <link> tag to your css (in static/assets/css/file.css), the call to ../assets/Trump.png from that css file will get to the correct place (because from the /css directory - 1 directory up is the static directory, and from there we go inside the assets and everything is ok).
However - If we are inside the / directory (where the page.html exists), this is also our root directory, when we try to go to ../assets/Trump.png the relative path we get is /assets/Trump.png (which does not exists in our server. The correct path should be /static/assets/Trump.png).
You should check the structure of your directories and put the correct relative path.
Remove the apostrophes in the url(), url() function does not need them
<div class="Img" style="background: url(../assets/Trump.png);">
Edit your image url to this
<div class="Img" style="background-image: url('assets/Trump.png');">
when you are declaring this background-property in your css the url is correct the assets folder is in the parent directory of css. but when using inline css the assets and the html file are in the same directory that is why you are getting this error.
Check your image path, there's a chance that's the issue. Check this out: CSS background image URL path
I have a new web space from the host I use to work with, and it works perfect, but I have a problem with the images displayed:
This is my index.html code:
<html>
<head>
</head>
<body>
Image in folder
<img alt="Smiley face" src="folder/img1.PNG"></img>
<br>
<br>
<br>
<br>
<br>
Image outside folder
<img alt="Smiley face" src="img2.PNG"></img>
</body>
</html>
The image inside the folder is not displayed.
I use WS_FTP, and inside public folder I have:
- index.html
- img2.PNG
- folder (inside this I have img1.PNG)
Any ideas? I use to create web pages and this is the first time this happens to me.
Thanks
Check the folder pesmissions in your server, maybe your site can not access to this folder.
I found the answer:
In the WS_FTP I had the radio button of ASCII files selected, instead of binary. I changed, upload again the images and it works!!
I have a few folders like Pages(html files go here), Javascript(script files), CSS(css files), images.
In my html file I wanna give path and I am not sure how I am supposed to give it.
If the file is going to be in the same folder the following will work
<img src="a_logo.gif" alt=""/>
But in my case I tried
<img src="../images/a_logo.gif" alt=""/>
which didn't work.
Any leads?
Thanks
Folder Structure
Folder A
|
|-----Folder VT
|
|-----HTML(a.html)
|-----JS
|-----CSS
|-----images
Inside a.html I wanna add js,css,images.
Only use of images/a_logo.gif will help to run code properly,You dont need to write ../images/
so here is a code:
<img src="images/a.gif" alt=""/>
Also, check if given images are present image folder and naming convention provided are right.
I have my images folder inside the same subdirectory folder. .
For example:
Domain: http://www.hebronics4u.com / subdirectory: webTract (http://hebronics4u.com/webTract/index.html - the images folder is in the same subdirectory folder.
I have tried all the following ways to get my pics to show and they will not show.
Here is the code:
<img src="../webTract/images/billyGraham.png">
<img src="webTract/images/billyGraham.png">
<img src="images/billyGraham.png">
Does anyone have any suggestions?
Try to use absolute path. <img src="/webTract/images/billyGraham.png">
What are there the errors in console logs?
If the images are in exactly the same sub-directory (for example)
http://hebronics4u.com/webTract/index.html is your working file and
http://hebronics4u.com/webTract/billyGraham.png is where your file is situated, simply use the name of the image.
E.g.
<img src="billyGraham.png">
<img src="./images/billyGraham.png">
Also fix your permission on the subfolders.
i write this code in a html page but it doesn't show the image what is problem?
<html>
<head>
<title>register page</title>
<body>
</head>
<table align="center">
<tr>
<td>
<img src="C:/xampp/htdocs/me/images/register.jpg" width="600" height="395">
</td>
</tr>
</table>
</body>
</html>
You have provided a full file path, not a relative path or URL.
If your website lives in htdocs, try changing the path to /me/images/register.jpg
If you're running it served from the actual server, the image src is invalid. It needs to be relative to your application root. In other words, if you application root is C:/xampp/htdocs/me, then your image tag should actually be <img src="/images/register.jpg" width="600" height="395">
did you check if is it the image available on that folder?
it would be nice if you are using relative path:
Relative Path URLs
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information listed filename sub-directories are listed without any preceding slashes weekly/filename links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is located in C:/xampp/htdocs/me/ folder on your site.
Determine the location of the page or image you want to link to. The Beginner's Resource Center is located here: C:/xampp/htdocs/me/images/
Compare the locations and to decide how to point to it From this article, I would
need to step up one directory (to/library) and then go back down to the beginning directory
Write the link using the rules listed above:
<img src="images/register.jpg" />