如何使用函數顯示圖像？

我想顯示一些圖像（* .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

如何使用函數顯示圖像？

回答

相關問題