-1

I want to know why does not this code show the images to me? I have checked the view page source and firebug after running the code. The img tags appear but they don't load the images provided in the array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=0.8; maximum-scale=0.8;" />
<script>
var links = [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
"5.jpg",
"6.jpg"
];
var images = "";
function showImages()
{
    for(i = 0; i < links.length; i++)
    {
        images += '<img id="myImage" href="'+links[i]+'">';
    }
    document.getElementById("container").innerHTML = images;
}
</script>
<style type="text/css">
.ph{border-style: solid;border-width: 5px;}
img.resize{max-width:100px;max-height:300px;margin:auto;}
#container{width: 500px;margin:auto; }
</style>
<title>Images</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container"><script>showImages();</script></div>
</body>
</html>
FreeMind
  • 213
  • 3
  • 20
  • Do the images exist in that location ? – adeneo May 24 '15 at 18:40
  • Yes, anyway, I had addressed to internet links. They exist, I have tested it. I have used another method http://stackoverflow.com/questions/29488371/how-to-add-a-list-of-images-to-the-document-from-an-array-of-urls and it did work but I want to know what is wrong with the above code which fails to display images. – FreeMind May 24 '15 at 18:43
  • 2
    Firstly, you're creating elements with the same ID, that's wrong. Secondly, images don't have `href` property, they have a `src` property – adeneo May 24 '15 at 18:47
  • @adeneo Thanks for pointing the same id problem! – FreeMind May 24 '15 at 18:51

1 Answers1

1

Image elements need a src instead of a href attribute. So change

images += '<img id="myImage" href="'+links[i]+'">';

to

images += '<img id="myImage" src="'+links[i]+'">';

JSFiddle

aleju
  • 2,376
  • 1
  • 17
  • 10