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

vwoqyblh  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(134)

我有一个“后”组件,我想每个人都有一个不同的形象,但他们是用相同的形象产生。
在后组件模板中,我有:<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"
  },
  [...]
]

所有职位的形象是相同的网址。
我相信目前的脚本是拉所有职位的图像在同一时间,或在一个单一的请求。我希望每个职位有自己的请求/图像。
演示:https://ionicgram.vercel.app/
图形接口:https://github.com/oliveirabruno01/Ionicgram

ff29svar

ff29svar1#

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

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

超文本标记语言

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

运输系统

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

相关问题