passing query parameter to graphicImage to prevent img caching

Question

I need to pass a query parameter to the graphicImage to prevent IE from using an old cached image.

I tried below and getting this error: File not found: /RES_NOT_FOUND

<h:graphicImage library="default" name="img/MSM_HeaderSplash.png?v=1.1"  
    alt=" " width="487" height="68" />

Below works, but I really don't want to hardcode the resources path:

<h:graphicImage value="resources/default/1_0/img/MSM_HeaderSplash.png?v=1.1"  
    alt=" " width="487" height="68" />

score 0 · Answer 1 · answered Jun 20 '14 at 17:45

You can try this

Easiest would be to add the folder as a "virtual context" of the servletcontainer which you're using. It's unclear which one you're using. In Tomcat it's a matter of adding a new to the server.xml

<Context docBase="/path/to/images" path="/images" />

and in Glassfish it's a matter of adding an alternatedocroot to the glassfish-web.xml

<property name="alternatedocroot_1" value="from=/images/* dir=/path/to" />

Refer the documentation of the servletcontainer for details. Ultimately they should be accessible by a normal URL so that you can just use for example:

<p:graphicImage value="/images/MSM_HeaderSplash.png?v=1.1" />

score 0 · Answer 2 · answered Jun 20 '14 at 18:30

I used below to resolve the issue. It is not as intuitive as using the graphicImage's library and name attributes. Please let me know if there is other work around. Thanks

<h:graphicImage value="#{resource['default:img/MSM_HeaderSplash.png']}&amp;v=1.0"  alt=" " width="487" height="68" />

score 0 · Answer 3 · edited May 23 '17 at 11:57

The best option for your case seems to be to use HTML <img /> tag. Surprisingly, most of image cache solutions are based in a random generated String, as there is no HTML standard way to achieve it. That will cheat the browser and force it to download it again.

There's no need to hardcode the image path more than once, just make use of <ui:param /> to keep variales in facelets.

<ui:param name="imageFolder" value="resources/images" />

<img src="#{imageFolder}/image.jpg?#{currentDate.time}" />

Where #{currentDate} is a current Date instance. This can be implemented by adding a request scoped bean to your faces-config:

<managed-bean>
    <managed-bean-name>currentDate</managed-bean-name>
    <managed-bean-class>java.util.Date</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

That evaluates to kind of:

<img src="resources/images/image.jpg?1403302512505">

So your current image will be retrieved in each request.

Another choice is to disable the entire browser cache at web-filter level, despite this would affect your whole content.

See also:

passing query parameter to graphicImage to prevent img caching

3 Answers3