BLOB images are displayed only on refreshing a page after an update via p:dataTable is made in PrimeFaces

Question

I\'m displaying images stored in the form of BLOB in MySQL on a as follows.

Answer 1

The newly updated image is displayed only when the page refreshed by pressing F5 (on most browsers). It is even not displayed on page load (entering a URL into the address bar and then pressing the enter key).

The image is being cached by the webbrowser. Resources are cached on a per-URL basis via the cache-related instructions set in the response headers. Your concrete problem is caused because the resource URL is still the same and the webbrowser isn't aware that the resource has changed in the server side. The OmniFaces CacheControlFilter showcase page explains caching in detail (note: the filter is not the solution to this problem).

You basically need to force the webbrowser to re-request the resource by changing the URL. One of most common approaches for this kind of situation, whereby a cacheable resource is suddenly changed and its change needs to be immediately reflected to all clients, is appending the "last modified" timestamp of the image to the query string of the URL. Given that you're using JPA, so this should do:

• Add a lastModified column to the brand table:

  ALTER TABLE brand ADD COLUMN lastModified TIMESTAMP DEFAULT now();
  

• Extend the Brand entity with the appropriate property and a @PreUpdate which sets it:

  @Column @Temporal(TemporalType.TIMESTAMP)
  private Date lastModified;
  
  @PreUpdate
  public void onUpdate() {
      lastModified = new Date();
  }
  
  // +getter+setter
  

  (a @PreUpdate annotated method is invoked by JPA right before every UPDATE query)

• Append it to the image URL (the parameter name v is a hint to "version"):

  <p:graphicImage value="#{brandBean.image}" ...>
      <f:param name="id" value="#{row.brandId}" />
      <f:param name="v" value="#{row.lastModified.time}" />
  </p:graphicImage>
  

  (I would here rename row to brand for clarity and brandId to id to deduplicate)

• Finally, if you're using PrimeFaces 5.0 or newer, then you also need to disable server side caching:

  <p:graphicImage value="#{brandBean.image}" cache="false" ...>
  

Design notice: if the image is not necessarily updated on every update of Brand, then split it off to another table Image and let Brand have a FK (@ManyToOne or @OneToOne) to Image. This also makes the property "image" reusable across various entities in the webapp.

Answer 2

hy,

i have the same problem, but my image src is in hardisk not in DB. i have result the problem when i have use a random number but i dont read it. in general i have add a param in src image when this param is a random number.

My solutionis like this:

public class UserPage {
  private String fotoCVPath;
  //all variabile
    private String getRandomImageName() {
        int i = (int) (Math.random() * 10000000);

        return String.valueOf(i);
    }
 public void editImage() {
//init the fotoCVPath
fotoCVPath = fotoCVPath + "?tmpVal=" + getRandomImageName();
}
  /**
     * @return the fotoCVPath <br>
     * 
     * @author  - asghaier <br>
     * 
     *         Created on 29/mag/2014
     */
    public String getFotoCVPath() {

        return fotoCVPath;
    }

    /**
     * @param fotoCVPath the fotoCVPath to set <br>
     * 
     * @author- asghaier <br>
     * 
     *         Created on 29/mag/2014
     */
    public void setFotoCVPath(String fotoCVPath) {
        this.fotoCVPath = fotoCVPath;
    }
}

and in you my page i have the element graphicImage like this:

<h:panelGrid ...al param >
    <h:column>
       <p:graphicImage id="imgCV" value="#{userPage.fotoCVPath}" styleClass="imgCVStyle" />
    </h:column>
</h:panelGrid>

and when i like reload the image a update the component panelGrid.

for my example i have use

<p:ajax event="click" onstart="PF('uploadImgCV').show();" update ="idPanelGrid"/>

in

i hope this mode help you for result your problem