title: Force reload cached image with same url after dynamic DOM change
body: <p>I'm developping an angular2 application (single page application). My page is never "reloaded", but it's content changes according to user interactions.</p>
  
  <p>I'm having some cache problems especially with images.</p>
  
  <h2>Context :</h2>
  
  <p>My page contains an editable image list : </p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;img src="myImageController/1"&gt;&lt;a href="editPage/1"&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="myImageController/2"&gt;&lt;a href="editPage/2"&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="myImageController/3"&gt;&lt;a href="editPage/3"&gt;Edit&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When i want to edit an image (Edit link), my dom content is completly changed to show another angular component with a fileupload component.</p>
  
  <p>The myImageController returns the LastModified header, and cache-control : no-cache and must-revalidate.</p>
  
  <p>After a refresh (hit F5), my page does a request to get all img src, which is correct : if image has been modified, it is downloaded, if not, i just get a 304 which is fine.</p>
  
  <p><em>Note : my images are stored in database as blob fields.</em></p>
  
  <h2>Problem :</h2>
  
  <p>When my page content is dynamically reloaded with my single page app, containing img tags, the browser do not call a GET http request, but immediatly take image from cache. I assume this a browser optimization to avoid getting the same resource on the same page multiple times.</p>
  
  <h2>Wrong solutions :</h2>
  
  <p>The first solution is to add something like ?time=(new Date()).getTime() to generate unique urls and avoid browser cache. This won't send the If-Modified-Since header in the request, and i will download my image every time completly.</p>
  
  <p>Do a "real" refresh : the first page load in angular apps is quite slow, and i don't to refresh all.</p>
  
  <h2>Tests</h2>
  
  <p>To simplify the problem, i trying to create a static html page containing 3 images with the exact same link to my controller : /myImageController/1. With the chrome developper tool, i can see that only one get request is called. If i manage to get mulitple server calls in this case, it would probably solve my problem.</p>
  
  <p>Thank you for your help.</p>