2

I've noticed a strange behaviour in my angular 5 app in various places where I display images in the following way

<img src="{{user.avatar}}"/>

Chrome will show a picture of another user although when I console.log or debug the app the url printed is the correct one. When I change browser tab and return to the current tab, the correct image will load, which leads me to the assumption that this is a browser caching issue.

The behaviour is random and seems not to be happening in Firefox. I've also tried <img [src]="user.avatar"/>with the same results.

Also tried to add random dummy parameter on the src value to prevent the browser caching: <img src="{{contact.userData.avatar+'?id='+randomId()}}"/> This seems to work but makes image loading pretty slow so I prefer to avoid it. Any ideas why this is happening?

Shakur
  • 1,449
  • 3
  • 19
  • 35
  • can you share your code that assigns url to user.avatar? – Sergey Rudenko Jun 13 '18 at 20:56
  • unless you have differentiated urls this issue can hurt indeed. and your other solution (adding random numbers etc) seems like a thing unless you can play with headers...https://stackoverflow.com/questions/728616/disable-cache-for-some-images – Sergey Rudenko Jun 13 '18 at 20:59
  • urls are coming from the server side and are of the type `http://localhost:8080/api/images/john.jpg` and `http://localhost:8080/api/images/mary.jpg`. I don't get why mary replaces john.. – Shakur Jun 13 '18 at 21:18
  • 2
    You could display the image URL on the page (e.g. `
    {{user.avatar}}
    `), and see if it is always correct. Since the URL is different for each user, I don't see why the cache would be a problem. It could be that the view is not refreshed at the appropriate time.     – ConnorsFan Jun 13 '18 at 21:31
  • I did and it does print the correct url, even if I inspect the element from the browser it has the correct url. What could I try for changing the refresh interval? – Shakur Jun 13 '18 at 21:40
  • So,the URL is correctly set to the image of `john` but you see the image of `mary`? I don't have an explanation for that behavior. And I don't understand why adding a random number to the URL makes a difference. – ConnorsFan Jun 13 '18 at 21:46
  • yes adding random number should help when url is the same. When its different - that's weird case indeed. – Sergey Rudenko Jun 13 '18 at 22:15
  • @Shakur can you still share more of the code snippet that replicates the problem? – Sergey Rudenko Jun 13 '18 at 22:15
  • @SergeyRudenko its not easy to isolate the issue but what I've noticed is that it only happens if the image has css styling. Tried to use [ngClass] to set the class dynamically but it still occurs – Shakur Jun 15 '18 at 06:22
  • Can you share css block? – Sergey Rudenko Jun 15 '18 at 06:23
  • It's irrelevant, any kind of styling causes this – Shakur Jun 15 '18 at 06:34

0 Answers0