3

My Elm app lets the user rotate pictures: when a picture on the screen is clicked, elm makes an API call to rotate the picture file on the server. Following that I'd like the rotated image to show in the browser.

But the virtual DOM hasn't changed at all since the img node has the same src URL. Is there a way I can force the img to be recreated anyway?

Sure, I could use a Keyed node or modify some attribute on my img to force the redraw, but that would mean adding something to my model that is modified on rotate. It's possible but not very elegant.

UnluckyPaladin
  • 347
  • 2
  • 7
  • 1
    I think you are basically correct, so the question becomes what sort of state to add. Perhaps the most suitable is something related to the http request state, as you may also want other effects to let the user know that the change in being made – Simon H Nov 12 '17 at 07:02
  • 2
    Seems like having the original and rotated versions share the same URI is a good way to get frustrated by caching at many levels, not just the DOM / browser. I'd suggest using a query parameter as a differentiator. – Robert K. Bell Nov 13 '17 at 00:35

1 Answers1

1

You want something to be modified on rotate: namely, the image. So you're going to have a change in your model at the point when you want the rotation to occur. I'd have the response from the API increment a counter in the model (or use the current time via Time.now), and then update the image URL with a cache busting query parameter based on that value. More details on cache busting query parameters are here: Cache busting via params

Robert Fischer
  • 1,436
  • 12
  • 26