CODEWITHSUNDEEP
javascripthtmlangularimagegif
Lhaer
Lhaer

Reputation: 275

Angular 5 not re-rendering img tag after [src] attribute changed

I'm building a reddit client app with Angular 5 which has the following snippet of code

  <div class="post-image" *ngIf="!post.media && !post.is_self">
    <img class="image" [src]="postImage()">
  </div>

This is the function that returns the image ur:

  postImage(): string {
    return this.post.preview.images[0].variants.gif
      ? this.post.preview.images[0].variants.gif.source.url
      : this.post.preview.images[0].source.url;
  }

As you can see, the img tag can either receive an url to a gif or a regular image file. The this.post variable is an Input variable that changes whenever the user selects a new post.

Now, the problem is, whenever I switch between two posts that display a regular image file, the image tag will re-render just fine, but when I switch between two posts that will display a .gif file, the image tag will simply not re-render, it will keep displaying the previous .gif.

Now, I've checked the rendered code already to see if the image src value was actually changing in this scenario, and the image src value does change, but the .gif will not re-render. The title and everything else in the component that renders the post will update, except the image tag. I have no idea what could be causing that problem.

EDIT: I think it might be helpful to add than I am running this app inside Electron.js, maybe that has something to do with the problem.

Upvotes: 2

Views: 1270

Answers (1)

Dakota
Dakota

Reputation: 525

I think it may be cache browser You can do look like this

 postImage(): string {
    return this.post.preview.images[0].variants.gif
      ? this.post.preview.images[0].variants.gif.source.url + '&date=' + new Date().getTime();
      : this.post.preview.images[0].source.url + '&date=' + new Date().getTime();
  }

Upvotes: 1

Related Questions