How to dynamically load images from the same url

Issue

I have a "post" component and I would like each one to have a different image, but they are generating with the same image.

In post component template i have: <img src="{{this.post.image}}" alt="" style="width: 512px">

post component:

  users: User[];
  @Input() post: Post;
  constructor(private user_service: UserService) { }

  ngOnInit() {
    this.users = this.user_service.getUsers();
  }

in Home template:

<app-post *ngFor="let post of posts" [post]="post"></app-post>

Home component:

ionViewDidEnter() {
    this.posts = this.posts_service.getPosts();
}

In postServices:

getPosts(): Array<Post> {
    let res = this.http.get<Array<Post>>(this.API_URL);
    let posts: Array<Post> = [];

    res.subscribe(response => {
      response.map(post => {
        let p: Post = {} as Post;
        p.id = post.id;
        p.author_id = post.author_id;
        p.created_at = post.created_at;
        p.updated_at = post.updated_at;
        p.image = post.image;
        posts.push(p);
      })
    })
    return posts;
  }

Finnaly, posts data:

[
  {
      id: 1,
      author_id: 1,
      created_at: "2020-01-01T00:00:00.000Z",
      updated_at: "2020-01-01T00:00:00.000Z",
      image: "https://thiscatdoesnotexist.com"
  },
  [...]
]

All posts image are the same url.

I believe the current script is pulling the image for all posts at the same time, or in a single request. I would like each post to have its own request/image.

DEMO: https://ionicgram.vercel.app/

github: https://github.com/oliveirabruno01/Ionicgram

Solution

The problem is the same url, browser use a cached version of the result, you can add a random value at the end.

https://thiscatdoesnotexist.com/?v=<RANDOM>

HTML

<img [src]="randNumberUrl(this.post.image)" alt="" style="width: 512px">

TS

get randNumberUrl(u) {
    return u + "?v=" + Math.floor(Math.random() * 99999)
}

Answered By - Talon