Tengo un componente "post" y me gustaría que cada uno tuviera una imagen diferente, pero están generando con la misma imagen.

En la plantilla del componente de publicación tengo: <img src="{{this.post.image}}" alt="" style="width: 512px">

componente de publicación:

 users: User[]; @Input() post: Post; constructor(private user_service: UserService) { } ngOnInit() { this.users = this.user_service.getUsers(); }

en la plantilla de Inicio:

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

Componente de inicio:

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

En postServicios:

 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; }

Finalmente, publica datos:

 [ { 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" }, [...] ]

Todas las imágenes de las publicaciones son la misma URL.

Creo que el script actual extrae la imagen para todas las publicaciones al mismo tiempo o en una sola solicitud. Me gustaría que cada publicación tuviera su propia solicitud/imagen.

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

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