如何从同一个url动态加载图像

Question

我有一个"张贴"；组件，我希望每个组件都有不同的图像，但它们使用相同的图像生成。

在后期组件模板中，我有：<img src="{{this.post.image}}" alt="" style="width: 512px">

后期组件：

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

主页模板：

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

主页组件：

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

邮政服务：

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，发布数据：

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

所有帖子的图片都是相同的url。

我相信当前的脚本正在同时或在一个请求中提取所有帖子的图像。我希望每个帖子都有自己的请求/图片。

演示：https://ionicgram.vercel.app/

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

Answer 1

问题是相同的url，浏览器使用缓存版本的结果，可以在末尾添加一个随机值。

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