Reloading Images in Angular-Templates (img)

Working on IT Hub, I recently had to find a way to reload images in this Angular Single Page Application. The new functionality I added allows an administrator to upload one image for each community group, so that each group has a logo. These images are displayed via a simple img tag in the HTML template:

<img *ngIf="group.imageURI" src="" height="50px"/>

The new uploaded image should be displayed here, instead of the old one, and without reloading the whole page. I researched quite complex solutions that tried to set timers for refreshing, manually loading the image and somehow setting it in the template and other complex operations. However, a browser reload of (only) the image is triggered by simply changing group.imageURI to a new value. The problem in my implementation is that each group has one image that is referenced by the groups ID. This ID doesn’t change. Hence, the URI to the image doesn’t change after it has been uploaded. group.imageURI stays the same, so the browser will do nothing.

The solution is to fake-change the URI with a random part, which is ignored by the server (see Stackoverflow):

this.adminGroupService.postNewLogo(Number(newGroup.id), this.currentFileUpload).subscribe((logoURI) => {
 
	// Force reloading the logo image in the template via call to server with randomized URI. URI of image is the
	// same, however it has to change for Angular to reload it.
	changedGroup.imageURI = logoURI['logoURI'] += '?random+\=' + Math.random();
}