Question

I have a bit of code like this in my template:

#{list people, as:'person'}
    <img src="@@{Application.image(person.id)}">
#{/list}

After starting up the play server, the list shows the first image multiple times. So for example, if the people variable contained the ids of 1, 2, 3, 4, 5 – then there will be five images shown but they are all the same image: that of the image corresponding to the id of 1.

If I hit refresh, the images all change to be unique depending on their ids. The html rendered from the template looks like this:

<img src="http://url/application/image?personId=1"/>
<img src="http://url/application/image?personId=2"/>
<img src="http://url/application/image?personId=3"/>
<img src="http://url/application/image?personId=4"/>
<img src="http://url/application/image?personId=5"/>

How can I stop the template from showing the same image first time round?

Edit: Also tried adding the response headers seen below prior to the renderBinary(image) call in my controller that responds to the src request:

...
response.setHeader("Pragma-directive", "no-cache");
response.setHeader("Cache-directive", "no-cache");
response.setHeader("Cache-control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "0");
renderBinary(imageFile);

as per this post. It actually worked the first couple of times but then the third time after stopping and starting the Play server, I had the same caching issue where all the images showed the same image despite the differing personIds. I have also appended the timestamp to the end of the url without any luck.

Edit #2: I also tried changing the http.cacheControl property to 0 in the application.conf:

http.cacheControl=0

But it again gave me inconsistent results as to whether it showed the right or wrong images.

Answer 1

I’m not sure if this is a viable solution, but I’ve got a work around for now that seems to work (well, it hasn’t failed on me just yet) by doing these things:

• Set the cache-control prior to the renderBinary(…) call in the Controller

  response.setHeader("Cache-Control", "no-cache");

• Convert the File that you are rendering to a FileInputStream and pass that to the renderBinary(…) method instead of the File directly.

Like this:

File fileImage = ... // some .png image
FileInputStream stream = new FileInputStream(fileImage);
renderBinary(stream);

I got the idea from seeing this bug report about caching and rendering binaries.