javascript - 将功能连接到 PC 文件夹中显示的图片

Question

我对 JS 和编程很陌生，所以如果解释有点草率，我很抱歉，但我会尽量让它清楚。

所以我想要做的是有一个 JS 代码读取和显示（在 HTML 页面中）来自 PC 文件夹的照片，使它们可点击，并在点击时将您重定向到具有相同照片但高分辨率的页面.

现在，我有这段代码可以显示上述图片，但问题是我似乎无法弄清楚如何将其“连接”到图片并使其可点击。更困难的是，我正在尝试使所有这些代码动态化（正如您在下面的代码中所做的那样），所以我不希望有任何硬编码的图片标题等。

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
   appendImage();
}
var tryLoadImage = function(index){
   tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;
   document.body.appendChild(img)
   tryLoadImage(index++);
}
tryLoadImage(index);

非常感谢任何帮助，非常感谢！

标签： javascripthtmlimagefunction

Answer 1

您可以通过向图像添加onclick功能来使图像可点击。尝试这样的事情：

var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;

   img.onclick = e => {
      // do something you want to show the full picture like this maybe
      var el = document.getElementById("fullpictureid");
      if (el && e.target.src) {
         el.src = e.target.src;
         // so that it sets "src" in <img id="fullpictureid"> for example 
      }
   };
   document.body.appendChild(img)
   tryLoadImage(index++);
}