title: GWT: How to update an image specified in html?
body: <p>I have the following html string added to a HtmlPanel. How can I modify the image?</p>
  <pre><code>private static String htmlStr1=&quot;&lt;div class=\&quot;container\&quot;&gt;&lt;img id=\&quot;image\&quot; src=\&quot;../image/default.jpg\&quot; alt=\&quot;Avatar\&quot; class=\&quot;image\&quot;&gt;&quot; +
                                 &quot;&lt;div class=\&quot;overlay\&quot;&gt;&quot; +
                                      &quot;&lt;a href=\&quot;#\&quot; class=\&quot;icon\&quot; title=\&quot;User Profile\&quot;&gt;&quot; +
                                          &quot;&lt;i class=\&quot;fa-user\&quot;&gt;&quot; +
                                          &quot;&lt;/i&gt;&quot; +
                                      &quot;&lt;/a&gt;&quot; +
                                  &quot;&lt;/div&gt;&quot; +
                                  &quot;&lt;/div&gt;&quot;;
  </code></pre>
  <p>I would like to load another image by the following code, but it fails. I have checked the html from Firefox, even the original htmlStr1 is not there. <strong>Without o.setImage, the htmlStr1 is loaded correctly.</strong></p>
  <pre><code>    Overlay o=new Overlay();
  //Without o.setImage, the html string is loaded correctly
      o.setImage(&quot;../image/default1.jpg&quot;);
      RootPanel.get(&quot;htmlStrContainer&quot;).add(o);
  </code></pre>
  <p>The code is as the following</p>
  <pre><code>public class Overlay extends HTMLPanel{
  private static String htmlStr1=&quot;&lt;div class=\&quot;container\&quot;&gt;&lt;img id=\&quot;image\&quot; src=\&quot;../image/default.jpg\&quot; alt=\&quot;Avatar\&quot; class=\&quot;image\&quot;&gt;&quot; +
                                 &quot;&lt;div class=\&quot;overlay\&quot;&gt;&quot; +
                                      &quot;&lt;a href=\&quot;#\&quot; class=\&quot;icon\&quot; title=\&quot;User Profile\&quot;&gt;&quot; +
                                          &quot;&lt;i class=\&quot;fa-user\&quot;&gt;&quot; +
                                          &quot;&lt;/i&gt;&quot; +
                                      &quot;&lt;/a&gt;&quot; +
                                  &quot;&lt;/div&gt;&quot; +
                                  &quot;&lt;/div&gt;&quot;;
  private String imgUrl=&quot;&quot;;
  public Overlay()
  {
      super(htmlStr1);        
  }
  
  //update the image by this function
  public void setImage(String _imgUrl)
  {
      this.imgUrl=_imgUrl;
      Image img=Image.wrap(Document.get().getElementById(&quot;image&quot;));
      img.setUrl(_imgUrl);
  }
  }
  </code></pre>
  <p>If I have a 2 Overlay to add,</p>
  <pre><code>Overlay o1=new Overlay();
  Overlay o2=new Overlay();
  RootPanel.get(&quot;htmlStrContainer&quot;).add(o1);
  RootPanel.get(&quot;htmlStrContainer&quot;).add(o2);
  o1.setImage(&quot;../image/default1.jpg&quot;);
  o2.setImage(&quot;../image/default2.jpg&quot;);
  </code></pre>
  <p>Then, why only the first Overlay is initiated with the image correctly?
  What is the best to modify the content of the HTMLPanel? Is it possible to modify the content of the HTMLPanel before it is attached?</p>
  <p>Thanks</p>