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" />
Related
The code snippet in html format is showing as below.
there are three requirements listed below for reference as well.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images and Links - Fast Broccoli!</title>
</head>
<body>
<div class="content">
<h1>Fast Broccoli! - About Us</h1>
<!--
Use images and links to build an "About Us" page for Fast Broccoli!,
the world's first one-hour organic produce delivery service.
You'll need:
1. A main image with source: https://upload.wikimedia.org/wikipedia/commons/0/03/Broccoli_and_cross_section_edit.jpg
and alt description: Fast Broccoli!'s Logo
2. A link to the relative path: index.html
with the text: Return Home
3. A second link to the absolute path: https://shop.fastbrocolli.com
The link should target a new browser window.
The link should contain an image
with source: images/cabbage.png
-->
</div>
</body>
</html>
This strangely looks like a school project. I could just give you the solution to your assignment, but I believe it would be better if you learn it.
Hope you enjoy!
Image Tag
Here's an example img tag from W3Schools:
<img src="smiley.gif" alt="Smiley face">
This is pretty simple. The source is smiley.gif and the alt description is Smiley face. Now do you know how to make your own image tag? Otherwise, click the link above for more details.
Links
Relative
A relative link is, well, relative. Where it goes depends on where the current URL.
A relative link is anything that does not begin http://, https://, file:///`, etc.
In the most basic sense, it's the current URL + the relative path. (Less simple, it's telling the browser it's in the same folder as the current page).
Example: If I added a link on this page that looks like:
Click me
It would go to:
https://stackoverflow.com/questions/47361572/relative-and-absolute-html-path/hi.html
Because:
https://stackoverflow.com/questions/47361572/relative-and-absolute-html-path + hi.html
If it begins with a forward slash (/), it will take the domain of the site and add to it. (Less simple, it's telling the browser the file is in the root directory of the site).
Example: If I added a link on this page that looks like:
Click me
It would go to:
https://stackoverflow.com/hi.html
Because:
https://stackoverflow.com + hi.html
Absolute
An absolute path is absolute. It doesn't add to the end, but is an entirely new domain.
Example: If I added a link on this page that looks like:
Click me
It would go to:
http://example.com/
Because it begins with http://
Notes
In all the examples, the text of the links was "Click me".
More info on file paths.
More info on the target attribute. (Allows you to "target a new browser window.")
i m getting this error "I can't find your main image with src="https://upload.wikimedia.org/wikipedia/commons/0/03/Broccoli_and_cross_section_edit.jpg". Please add it."
<h1>Fast Broccoli! - About Us</h1>
<img src="Broccoli_and_cross_section_edit.jpg" alt="Fast Broccoli!'s Logo"
style="width: 60px;"/>
Return Home
<a href="https://shop.fastbrocolli.com">
<img src="images/cabbage.png" />
</a>
I have searched everywhere for an answer and cannot find one. For some reason, in my HTML document, an image will display when opened from my browser fine. But when I upload my site to a server host this one specific image won't show.
Code:
<html>
<body background="images/background.jpg">
<img src="images/pp_4.png" style="float:left" vspace=50>
<center><img src="images/logo.png"></center>
<hr color="pink">
<style>
#font-face{
font-family:"chococookie";
src:url("font/choco_cookie.ttf")
}
p{font-family:chococookie;
font-size: 100%; }
</style>
<!---------------------------------------------------------------------------------->
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src="images/image_226.jpg"></center>
<center><p>Love Live! gone sexy. #anime #sexy #ecchi #lovelive #bikini #chan #tyan #girl #kawaii #cute - 22 Oct at 10:48 pm</p></center>
<!---------------------------------------------------------------------------------->
<hr color="pink">
<center><img src="images/more_images.png" /></center>
</html>
I have tried resizing the image, and many other things, but nothing worked. The image not displaying is pp_4.png.
Make sure that image's name uploaded to your server matches name that you have written in your code. I mean, check for uppercase and lowercase letters, as far as you are probably using Windows that doesn't care about letters register. Your server might be using Linux that does care about it
First you need to make sure the image was uploaded to the server successfully. Try accessing that image without using your HTML code. For example, if your domain is www.example.com and your images directory is in the root folder, you should be able to access images from URLs such as:
www.example.com/images/image_226.jpg
Try to access the image you are referring to by using www.example.com/images/pp_4.png. You need to know where you are placing your images and if they have been uploaded successfully to the server. Then use your HTML code to access those images and it should work.
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 two image descriptions in HTML on my local PC:
<IMG src="url('myimage.png')"></IMG> <!-- this I call "explicit" -->
<IMG src='myimage.png'></IMG> <BR>
Neither Mozilla, nor IE do show the first image. Naturally, I tried to interchange apostrophes or omit apostrophes and so on...
Why don't browsers seem to see an image described by the 'url' keyword?
You can only specify an image using a relative or an absolute URL. The url keyword is used in CSS to express an image location.
Refer to http://www.w3schools.com/tags/att_img_src.asp for more info on the img src attribute.
Some working examples:
Relative url, can only be used if the html file in on the same dir:
<IMG src="myimage.png"></IMG>
Relative url #2, can only be used if myimage.png is on dir images inside the same dir as the html file :
<IMG src="images/myimage.png"></IMG>
Absolute url - can be used from anywhere
<IMG src="http://something.com/images/myimage.png"></IMG>
The same as the above, without including the website, must be used inside domain something.com
<IMG src="/images/myimage.png"></IMG>
I have a master page where I display images.
<img src="../Images/footer_faq.png" alt="faq" />
<img src="../Images/footer_feedback.png" alt="feedback" />
This works for most of my pages, But if I navigate to a page inside of a folder the images don't work anymore. The folder name is added before /images/
Exampe:
www.mysite.com/Images/footer_faq.png -- works
as I navigate
www.mysite.com/Public/Images/footer_faq.png -- does not work
What is the best way to prevent this as so my images on the master page will display no mater what content page I navigate to.
Assume you have this tree, with a DocumentRoot of /
- /
- Public/
-Images/
- ...
- Pages/
- ...
- index.html
Assume that index.html is your master page.
Now, assume we are on index.html
The relative path to Images would be Public/Images/
The absolute path to Images would be /Public/Images/
Now, assume we are on Pages/about.html
The relative path to Images would be ../Public/Images/
The absolute path to Images would be /Public/Images/
As you can see, the absolute path won't change depending on the page you're on.
This would result in your <img tags becoming;
<img src="/Images/footer_faq.png" alt="faq" />
<img src="/Images/footer_feedback.png" alt="feedback" />
Change them to the way your document tree is designed