Ich habe eine Angular-App erstellt, die über eine Schaltfläche verfügt, mit der der Liste ein neues Element hinzugefügt wird. Hier ist ein Bild davon:

Angular App

Ich suchte nach Websites, die zufällige Bilder liefern, und fand "picsum.photos" (Lorem Picsum), das mir beim Aktualisieren tatsächlich jedes Mal ein zufälliges Bild liefert.

Ich habe versucht, dies im Code zu implementieren, erhalte jedoch jedes Mal das gleiche Bild.

TypeScript-Code:

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 Quelltext:

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

Es scheint, dass nur ein zufälliger Bildlink in der Variablen 'randomImgUrl' gespeichert wird ...

Weiß jemand, worum es geht? Wie kann ich jedes Mal ein zufälliges Bild erhalten, wenn ich die Funktion addRecipe () aufrufe?

Vielen Dank!

1
Engineer 19 Feb. 2020 im 17:59

4 Antworten

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

addRecipe() {
  this.recipes1.push(new Recipes('name', 'description', this.getRandomImgUrl()));
}
3
coudy.one 19 Feb. 2020 im 15:09

Verwenden Sie eine Zufallszahl in 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));
}
1
iman madani 19 Feb. 2020 im 15:18

Sie können das Bild ändern, indem Sie eine Cache-Busting-Abfragezeichenfolge an das Ende anhängen

randomImgUrl = 'https://picsum.photos/536/354?a';
0
IS1221 19 Feb. 2020 im 15:08

Fügen Sie zufälliges Queryparam hinzu, um zu verhindern, dass Ihr Browser dieses Bild zwischenspeichert.

addRecipe() {
  this.recipes1.push(new Recipes('name', 'description', this.randomImgUrl + '?q=' + Math.random()));
}
0
Andrei 19 Feb. 2020 im 15:05