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

Question

我正在创建一个 Instagram 副本，我认为拍摄 AI 生成的动物和现实生活中不存在的人的图像是一个好主意。

我有一个“发布”组件，我希望每个组件都有不同的图像，但它们生成的是相同的图像。

在帖子组件模板中，我有： <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;
  }

最后，发布数据：

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