How do I expire a cached image without hitting F5?

Question

I am making a web application with MVC4 and C#.

I am allowing the user to upload an image for their profile picture. At this moment, I need the previous profile picture to expire so that when the browser reloads the page the new image is displayed. Currently, since both of the images share the same name the browser uses the previous image that has been cached instead of the new image.

If I force the browser to reload with F5 it shows the new image. How do I make sure that a user returning to their profile page sees the new image and not the one in the browser cache without hitting F5?

Answer 1

You can add a dummy parameter to the end of the image filename. For instance,

<img src="...\avatar.jpg?d=7615833">

where the number is random or a timestamp. It will be ignored, but the presence will force the browser to reload the image.