Angular添加随机图片异常：点击按钮新增列表项时图片重复

你遇到的问题很典型——你的randomImgUrl变量只会在组件初始化时被赋值一次，它的值是固定的字符串https://picsum.photos/536/354。每次调用addRecipe()时，你都是把这个固定不变的URL传给新的Recipes实例，所以所有新添加的列表项都会使用同一个图片地址。

更关键的是，浏览器会对相同URL的请求结果进行缓存：第一次请求这个地址时，浏览器会保存返回的图片；后续再请求同一个URL，浏览器会直接用缓存里的图，不会再去picsum服务器请求新的随机图，这就导致你看到所有新增项都是同一张图。

要实现每次调用addRecipe()都获取不同的随机图，你需要在每次调用方法时生成一个独一无二的图片URL，让浏览器认为这是一个新的请求。这里有两种简单可靠的方式：

方法1：添加随机查询参数 #

在picsum的URL后面追加一个随机参数（比如时间戳或随机数），picsum会忽略这个额外参数，但浏览器会把带不同参数的URL视为不同的请求，从而每次都去拉取新的随机图：

addRecipe() {
  // 用时间戳生成唯一参数，确保每次URL都不一样
  const newRandomImgUrl = `https://picsum.photos/536/354?t=${Date.now()}`;
  // 或者用随机数：`https://picsum.photos/536/354?random=${Math.random()}`
  this.recipes1.push(new Recipes('name', 'description', newRandomImgUrl));
}

方法2：动态生成picsum的随机ID（可选） #

如果你想更精准地控制随机图，也可以用picsum的ID机制，每次生成一个随机ID（范围1-1000）来获取不同的图：

addRecipe() {
  const randomId = Math.floor(Math.random() * 1000) + 1;
  const newRandomImgUrl = `https://picsum.photos/id/${randomId}/536/354`;
  this.recipes1.push(new Recipes('name', 'description', newRandomImgUrl));
}

这种方式的好处是同一个ID会返回固定的图，适合需要固定某些图但新增时随机的场景，不过单纯要每次随机的话，方法1更简单。

记得删掉原来的randomImgUrl变量（如果不用的话），避免后续混淆。另外，如果你想让现有的列表项也显示不同的图，需要在初始化recipes1时也使用动态生成的URL，而不是固定的imgUrl。

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