Use versioned URLs for images

[jryans]

We don't want to wait for caching to expire with quick changes.

[jryans]

This will help @nadonomy iterate quickly on experimental, for example.

[jryans]

The ideal case would be for the URL to contain the hash of the file, so that it only changes when the file changes. If that's too hard, then using the bundle ID similar to JS and CSS URLs is a good option as well.

[ara4n]

see also
#233

[jryans]

I have an approach that extends the Webpack build process to add a content hash to image URLs to achieve this.

However, it does require changing all JSX usages of images from:

<img src="img/warning.svg" />

to:

import WarningSVG from "img/warning.svg";
// ... other code ...
<img src={WarningSVG} />

Does anyone have opinions about this transformation? Feel free to add reactions here if you have them.

For cases where we use images via CSS urls, no change is needed.

[jryans]

Fixed by matrix-org/matrix-react-sdk#2460 and #8159.