來自同一 url 的隨機圖像

Question

系統提示我遍歷 javascript object 中的項目。 Each item has an imageUrl property that points to this url: https://www.placebeard.it/400x400 This url is supposed to generate random images on each visit, but when I loop over the objects I end up getting the same image 25次。 當我檢查頁面並單擊圖像時，我會得到隨機圖像。 這是一個codepen項目，這可能是問題嗎？

這是用於獲取圖像的代碼示例

const makeCard = (item) => {
  let card = document.createElement('div');
  card.classList.add('card', 'p-0');

  // card image
  let image = document.createElement('img');
  image.classList.add('card-img-top');
  image.src = `${item.imageUrl}`;
  console.log(image.src);
  card.appendChild(image);

  //... append to container
}

謝謝

Answer 1

這是您的瀏覽器玩的一個技巧：因為您將圖像指向同一個 URL，瀏覽器會認為它是同一個圖像。 您可以通過添加一個虛擬查詢字符串和一個隨機值來獲得它，例如：

const makeCard = (item) => {
  let card = document.createElement('div');
  card.classList.add('card', 'p-0');

  // card image
  let image = document.createElement('img');
  image.classList.add('card-img-top');
  image.src = `${item.imageUrl}?random=${Math.random()}`; // notice this
  console.log(image.src);
  card.appendChild(image);

  //... append to container
}

而且您應該得到不同的圖像（服務器通常會忽略它們無法識別的查詢字符串）。

Answer 2

您可以在 json 文件中添加圖像 src 並將 json 文件轉換為 javascript ZA8CFDE6331BD59EB2AC96F8911C46