Question

我在显示列表中的大图像时遇到问题。我从图像类别列表中进行选择，然后显示4张小图片（在CSS中，我设置了max-width: 10%; height; auto）。然后，我单击照片并将其显示在新窗口中。

for (let i = 0; i < 4; i++) {
  const imgFromTable = selectTable[i];
  console.log(selectTable);
  let myImg = document.createElement('div');
  myImg.className = 'myImg';
  myImg.innerHTML = `<a href="${imgFromTable}" target="_blank"><img src="${imgFromTable}" ></a>`;
  results.appendChild(myImg);

在结果中，我希望单击后在该页面上的其他位置（例如，div中）以全尺寸显示图像。

Answer 1

我想你想要这样的东西

var selectTable = [
  "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
  "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png",
  "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
  "https://homepages.cae.wisc.edu/~ece533/images/barbara.bmp"
]

var results = document.querySelector("#results")

var showImage = url => document.querySelector("#view").src = url


selectTable.forEach(imgFromTable => {
  let myImg = document.createElement('div');
  myImg.className = 'myImg';
  myImg.innerHTML = `<a onclick="showImage('${imgFromTable}')"><img src="${imgFromTable}" ></a>`;
  results.appendChild(myImg);
})

.myImg {
  max-width: 10%;
  height: auto;
}

.myImg img {
  width: 100%;
}

<div id="results">
</div>
<img id="view">

从列表中显示大图像

1 个答案: