Angular добавить случайное изображение JPG?

Question

Я создал приложение Angular, в котором есть кнопка, которая добавляет новый элемент в список, вот его изображение:

Я искал сайты, которые предоставляют случайные изображения, и нашел «picsum.photos» (Lorem Picsum), который после ссылки sh действительно дает мне случайную картинку каждый раз.

Я пытался реализовать это в код, но я получаю одно и то же изображение каждый раз.

Код TypeScript:

imgUrl = 'https://some_long_path.jpeg';
randomImgUrl = 'https://picsum.photos/536/354';

recipes1: Recipes[] = [
    new Recipes('A Test Recipe',
      'This is simply a test', this.imgUrl)
];

addRecipe() {
   this.recipes1.push(new Recipes('name', 'description', this.randomImgUrl));
}

HTML Код:

<button class="btn btn-success" (click)="addRecipe()" (keyup.d)="removeRecipe()">New Recipe</button>

Кажется, только один ссылка на случайное изображение сохраняется в переменной randomImgUrl ...

Кто-нибудь знает, в чем проблема? Как получить случайное изображение каждый раз, когда я вызываю функцию addRecipe ()?

Спасибо!

Answer 1

getRandomImgUrl() {
  return this.randomImgUrl + '?cache=' + new Date().getTime()
}

addRecipe() {
  this.recipes1.push(new Recipes('name', 'description', this.getRandomImgUrl()));
}

Answer 2

использовать случайное число в randomImgUrl

addRecipe() {
this.randomImgUrl=`https://i.picsum.photos/id/${Math.round(Math.random() * 1000)}/535/535.jpg`;
   this.recipes1.push(new Recipes('name', 'description', this.randomImgUrl));
}

Answer 3

Вы можете изменить изображение, добавив в конец строку запроса к кешу

randomImgUrl = 'https://picsum.photos/536/354?a';

Answer 4

добавьте случайный запрос, чтобы ваш браузер не кэшировал это изображение.

addRecipe() {
  this.recipes1.push(new Recipes('name', 'description', this.randomImgUrl + '?q=' + Math.random()));
}