i am using html to create a page. but the problem i am facing is i am not geeting the image. my code is as:
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body style = " background:#FFA500">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" />
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" />
</div>
</form>
</body>
</html>
but it is not showing me the images when i run this html file in browser..
please help me out..
is this possible to give image url on run time in <img src> tag in html file.. if yes how can we do that..
You should change C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg to file:///C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg and the same with your other URL too.
Referencing local files from a non-file:// location (even if it's localhost) is no longer possible in many modern browsers for security reasons.
Chrome for example will throw the following error in its console:
Not allowed to load local resource: file:///C:/path/to/filename
You would have to put the HTML file into a local folder (which is probably not what you want because you have server-side code in it) or move the images to a location that you can call through your web server.
Related
Image is not showing in browser using the image tag where am i wrong?
i want to add image in web and i am unable to do it using in visual code i don't know where from image to be added in the URL of image so anyone guide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign up </title>
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper" >
<img src="D:\my-angular-projects\signup-form\src\image\Snap.jpg" alt="Scone O'Clock logo" />
</a>
<p class="Strap">Scones: the most resplendent of snacks </p>
</div>
<div class="IntroWrapper">
<p class="IntroText">
Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
</p>
<div class="MoneyShot">
<img class="MoneyShotImg" src="D:\my-angular-projects\signup-form\src\image\1555932407.jpg" alt="Incredible scones" />
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">
Ingredients</h3>
<ul>
</ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper">
</ol>
</div>
</body>
</html>
the problem is that your file retrieves the image based on where the html file is somewhere and it does not check the entire computer hard drive.
So if you want the problem fixed you can start from the html files location basically. So if your html file is in the src folder your img tag shall be
<img src="image/1555932407.jpg">
else if you have your html file in the signup-form folder i shall work with this
<img src="src/image/1555932407.jpg">
Hopefully you found this useful otherwise just comment this post.
Visual Studio Code automatically retrieves files from the root directory, so it lists all of the files for you - making it easier to implement images and other stuff. It's one of the main reasons I use VSCode.
The image location depends on where your HTML file is. Use forward slashes when specifying folders/files, and use ../ to go up a directory.
I am using the following code to attempt to place an image of myself into my personal website:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
The photos directory is in the same directory as the html page. I have tried placing the photo in the same directory as the html page and it doesn't work. I have tried using .JPG instead of .jpg. I have tried executing the code without the alt tag. I have tried using backslashes instead of forward slashes in the file path. I have looked for typos in the filename and there are none. I feel like my current code should be working with no problems. But the image will absolutely not show up. Any ideas or help would be greatly appreciated.
EDIT: I have corrected the code above to fix an elementary mistake, namely including the body inside of my head instead of separating the two. The picture still does not show.
The HTML structure needs to be:
<html>
<head>
</head>
<body>
</body>
</html>
You are putting the body tag inside the head tag.
Also, if the images directory is in the same one than the html, you need to remove the first slash, just use photos/mainphoto.jpg
So you can try:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src="photos/mainphoto.jpg" alt="Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
Also I recommend you not to use any spaces before or after the equal signs, these are good practices.
Well, your code is like this
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</head>
</html>
You have <body> element inside your <head> element.
It should be like this
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
And for that image, the address must start from your html file.
So if you have structure like this
web/
index.html
photos/
cutePuppy.png
You will have <img src="photos/cutePuppy.png" alt="Cute puppy">
Try using the full path of the image listed in its properties.
FIXED
In the Windows 10 filesystem, the picture file extensions are evidently hidden. I had named the picture "mainphoto.jpg", without realizing that the Windows 10 filesystem had already automatically added a .jpg extension, which was hidden in the file structure. Therefore, the name of the file being referenced was actually "mainphoto.jpg.jpg".
Apologies for the silly mistake, and thank you to everybody who offered suggestions!
Does it show as 404(not found) in the web inspector of the browser you are using. Chances are that the folder with the image and possibly the image it self don't have permissions great enough to allow access. You will have to change the permissions via terminal or possible in the editor(IDE) you are using.
I want to be able to use images in a separate folder for my web page, however when I run the page, the image fails to appear. Previously I had the image I wanted to use in the same place a the web page and that worked fine, however once I placed the image in a folder and tried to run the web page, the image no longer showed. I have checked to make sure I have made sure that I have spelt files and folder correctly that I have the correct path, I have also tried adding ../ to the front, but that didn't work. Many thanks for any help.
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="/Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
Try following code:
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
You have the image tag wrong. It's one of those self-closing tags in HTML.
<img src="" ... /> or <img src="" ... > is all you need for an image to show up.
if the image is a directory at the same level as your HTML page, you don't need the leading /.
Here is the correct way to add your image to the page:
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142" />
I have following code in index.html:
<a data-ajax="false" rel="external" href="../Info/BasicDefinition.pdf"
data-theme="c" data-iconpos="top" data-icon="arrow-d" data-role="button">Structure</a>
But i get 404 error - file not found after click on structure link. What i must change? I want to open .pdf file from browser.
My file structure (MPSR - root folder of my web site)
-MPSR
-----index.html
-Info
-----BasicDefinition.pdf
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Source: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
So, you can remove the rel="external" from your tag and it should work.
I can't post this on jsFiddle, as it wouldn't work, but I've tested here and it worked fine:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>
<a data-ajax="false" href="../info/test.txt" data-iconpos="top" data-icon="arrow-d" data-role="button">Link</a>
</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Folder structure:
\test
\info
\test.txt
\root
\index.html
How can I create a clickable link that opens multiple images in one page only? I host all my images in photobucket. I was able to create a link to open one image only but not multiple images simultaneously.
Keep all 6 files in same directory
Image1(Name:html1.html)
<html><body>
<img src="/image1.jpg"><br>
</body></html>
Image2(Name:html2.html)
<html><body>
<img src="/image2.jpg"><br>
</body></html>
Image3(Name:html3.html)
<html><body>
<img src="/image3.jpg"><br>
</body></html>
Image4(Name:html4.html)
<html><body>
<img src="/image4.jpg"><br>
</body></html>
Image5(Name:html5.html)
<html><body>
<img src="image5.jpg"><br>
</body></html>
Main html
<html><body>
image1
image2
image3
image4
image5
</body></html>
I am a newbie and just a 12-year old boy.
Apologies for any mistakes
put your images inside a sperated html file like "images.html"
and link the hyperlink to that page
click me
this is HTML sample page: put all images in images folder in the same HTML page root directory
<html>
<head></head>
<body>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
</body>
</html>
Working Example : http://jsbin.com/eluqod/4/
You don't need to be an expert. If you have the basic knowledge of HTML and JavaScript you can do it on your own. The easiest option is to use jQuery framework, it's a less write, do more JavaScript library that makes interactive web design easy.
What you have to do is create a <div> container and put all your images using HTML's <img> now you have to include the jQuery library in your document
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Now use the hide and show or any other effects like FadeToggle, SlideToggle etc. effects (http://api.jquery.com/category/effects/) to toggle hide and show for the image container div. Setup your complete page with the image container and the link, first hide the image container using display:none; and now use the jQuery function to trigger a function on click of that anchor element.
This is the jQuery
$(document).ready(function(){
$('#showimg').on('click',function(){
//Trigger FadeToggle function on click
$('.image-container').fadeToggle();
});
});
And the HTML
<a id='showimg'>Hide/Show Images</a>
<div class='image-container' style='display:none;'>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
</div>
Do remember to add the JavaScript library in your page.
check the code to learn about it: http://jsbin.com/eluqod/4/edit
You have to create different HTML files for all your image sets. You don't only have create the HTML files, you also have to upload those HTML documents online on a server so people can access it from anywhere.
1. Create an HTML file
Open notepad or any plain text editor and paste this in your file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page title</title>
<style type='text/css'>
.image-container {text-align:center;}
img {width:80%;height:auto;display:block;margin:10px auto;border:2px solid black;padding:5px;}
</style>
</head>
<body>
<h2> The first 50 pictures (or whatever title you want)</h2>
<!-- Images below -->
<div class='image-container'>
<!-- Each images are in img tag, put the photobucket images link into the src attribute. Repeat the img tags if you want more images -->
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
</div>
</body>
</html>
And save it with an understandable name ending with .html [name].html and save type as All Files - Make sure to save the file with encoding UTF-8. Just make the necessary changes and upload it to a server and link it.
Repeat the steps for more other HTML files with different images in it.