遍历生成图片时重复显示同一图的问题求助（CodePen环境）

这跟CodePen没关系，是浏览器缓存在搞鬼。

原因分析 #

你循环创建图片时，浏览器会在极短时间内重复请求同一个图片地址。为了优化性能，浏览器直接复用了第一次请求返回的缓存结果，导致所有图片都显示同一张。而点击图片时，要么是在新标签页打开（浏览器会发起新请求，不使用缓存），要么触发了图片的重新加载逻辑，所以能拿到随机生成的新图。

解决方法 #

最简单的方式是给图片URL添加一个随机查询参数，让每个请求的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}?t=${Date.now()}`;
  console.log(image.src);
  card.appendChild(image);

  //... append to container
}

你也可以用Math.random()生成随机数当参数，效果是一样的：

image.src = `${item.imageUrl}?rand=${Math.random()}`;

内容的提问来源于stack exchange，提问作者Tyreeck M