如何使用函数显示图像？

我想显示一些图像（* .jpg），这些图像我已经存储在一个文件夹中。我想用一个函数显示这些图像。为此，我创建了一个由对象组成的数组，每个对象都包含一个我正在函数中使用的ID。下面的代码：如何使用函数显示图像？

//employee array 
var employees =[{ 
    name:"jacob", 
    age :23, 
    city:"Boston", 
    yoe :12, 
    image :'d.jpg', 
    id : 1 
    }, 
    { 
    name:"aaron", 
    age :21, 
    city:"Nevada", 
    yoe :12, 
    image :'b.jpg', 
    id : 2 
    }, 
    ... 
}];

我使用的是员工id - 这是图像的名字 - 来显示图像。以下是图像的功能：

function getimages(){ 
    for(var i = 1;i <= employees.length;i++){ 
     document.getElementById("list + i").innerHTML = employees[i].id+".jpg"; 
    } 
} 
getimages(); // to get the images

这是我想说明这些图片的HTML部分：

<ul> 
    <li id="list1">A</li> 
    <li id="list2">B</li> 
    <li id="list3">C</li> 
    <p>123213</p> 
</ul>

来源

2013-04-25 Kingisback

要在getImage功能全，你可以简单写一个显示图像<img> -tag

document.getElementById("list" + i).innerHTML = '<img src="' + employees[i].id + '.jpg" />';

，或者你可以做到这一点作为@Frederik建议，但是这需要你写的“核心”的JavaScript。

来源

2013-04-25 07:44:57 TryingToImprove

日Thnx很多@TryingToImprove :) – Kingisback 2013-04-25 08:06:35

请注明所接受，如果你得到它我的回答.. :-) – TryingToImprove 2013-04-25 13:11:53

您将需要用document.getElementById("list" + i)替换document.getElementById("list + i")。

然后，有时可能需要动态创建DOM元素并添加它们，因为您永远不知道何时需要更新这些新元素。你可能有这样的事情：

function getimages(){ 
     for(var i = 1;i <= employees.length;i++) { 
      var elem=document.getElementById("list"+i); 
      var imagePath=employees[i].id+".jpg"; 

      // append text 
      elem.appendChild(document.createTextNode(imagePath)); 

      // append image 
      var img = document.createElement("img"); 
      img.src = imagePath; 
      elem.appendChild(img); 
     } 
}

来源

2013-04-25 07:45:23

日Thnx很多弗雷德里克:) – Kingisback 2013-04-25 08:06:05

如果员工人数变化，那么你可能想使列表元素的数量变量。您可以通过创建一个空的无序列表<ul id="employees"></ul>，然后改变getImages功能做到这一点：

function getImages(){ 
    for(var i = 1, img, li; i <= employees.length; i++) { 

     // create image and set image source 
     img = document.createElement("img"); img.src = employee[i].image; 

     // create list item, set ID and attach previously created image 
     li = document.createElement("li"); li.id = "list"+i; li.appendChild(img); 

     // attach list item to unordered list of employees 
     document.getElementById("employees").appendChild(li); 
    } 
}

现在，只要你喜欢，你可以有很多的员工，他们都将有自己的列表ID。我还更改了for循环中的变量声明，以便重用变量，而不是在每次迭代中重新声明。

来源

2013-04-25 08:36:10 strakez

日Thnx strakez！ – Kingisback 2013-04-25 08:58:41

如何使用函数显示图像？

回答

相关问题