I am trying do to a simple HTML page but for some reason some images didn't appear although the src was correct. In order to discover the origin of the problem I tried to insert the images on the body of the HTML document (outside of divs and without the javascript functions I was using to manipulate the images). They also didn't appear! The src is correct and the images are displayed if I open them in the browser (if I type the address of the image in the url bar).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<!-- This image appears -->
<img src="images/header.jpg" style="width:100%">
<!-- This image don't -->
<img src="images/img_1.jpg" alt="tigre" style="width:100%">
</body>
</html>
I can't understand the origin of the problem. I tryed to open the images in a editor and save both of them to see if was a problem of encoding or something like that but the problem persisted, the imagens that appeared before continued to appear and the others continued to not show up.
EDIT: If i resized the second image to the same size of the first and save it on a new file it starts to appear although blurry (due to the resizing):
image 1: 1024 x 300
image 2: 850 x 315
The page is just local (I'm not using server programs) and I am using Edge.
Thank you in advance:
works and looks ok,
https://jsfiddle.net/hts3wdjx/
<!-- This image appears -->
<img src="http://placehold.it/350x150" style="width:100%;" />
<!-- This image don't -->
<img src="http://placehold.it/350x150" alt="tigre" style="width:100%;"/>
you problem is images/
<body>
<!-- This image appears -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" style="width:100%;" />
<!-- This image don't -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" alt="tigre" style="width:100%;" />
</body>
Related
I am trying to upload this Image from my computer to a web page. But, it won't upload.
used different paths, however when I use (bit.ly/fcc-relaxing-cat(link)) in my src, it does load up the picture.
<!DOCTYPE html>
<html>
<!--
<head id="main">
</head>
-->
<div id="main">
<title>Dr. Norman Borlaug</title>
</div>
<body>
<h1 id="title">Dr. Norman Borlaug</h1>
<div id="img-div">
<img
src="C:\Users\corne\Desktop\FreeCodeCampProjects\Project1\images\norman.jpg" alt="A man holding a crop">
</div>
</body>
</html>
it show a picture of a man holding a crop.
Clients usually can't request local file system.
If you want to use absolute path you should do something like this:
<img src="http:\\localhost\img\picture.png"/>
Remember to add your image to the root folder.
is there a way to change my queue order for images?
I have an image which i use as a "blur" preview for an bigger image. I use a cms so there are a lot of images which load before my image. Even preload is ignored.
The order is:
Body with background image
27 images
Custom preview image
What I try is to change my queue order
Body
custom Preview image
27 images
My image is a low resolution image. It is 85x53 and its size is about 2,13kb.
And it start at 1,4s (Sometimes even later).
Thanks for any help :)
Kind regards,
Rakowu
You can try to use a hidden <img> tag at the top of your body to force the browser to load it earlier
Something like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<img src="your/preloaded/image.png" style="display: none;"/>
<!-- ... -->
</body>
</html>
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" />
While trying to use different size images in same img tag, only the first image is picked up. The remaining images are not picked up on different display size device.
Here is the code that I am trying with.
<html>
<body>
<img src="image_1.jpg" sourceset="image_2.jpg 2x, image_3.jpg 6.5x" alt="Image">
</body>
</html>
Syntax error.
Change attribute name sourceset to srcset.
It seems you misspelled srcset. Try as follows:
<html>
<body>
<img src="image_1.jpg" srcset="image_2.jpg 2x, image_3.jpg 6.5x" alt="Image">
</body>
</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.