GWT: How to update an image specified in html?

I have the following html string added to a HtmlPanel. How can I modify the image?

private static String htmlStr1="<div class=\"container\"><img id=\"image\" src=\"../image/default.jpg\" alt=\"Avatar\" class=\"image\">" +
							   "<div class=\"overlay\">" +
							   		"<a href=\"#\" class=\"icon\" title=\"User Profile\">" +
							   			"<i class=\"fa-user\">" +
							   			"</i>" +
							   		"</a>" +
							   	"</div>" +
							   	"</div>";

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. Without o.setImage, the htmlStr1 is loaded correctly.

    Overlay o=new Overlay();
//Without o.setImage, the html string is loaded correctly
	o.setImage("../image/default1.jpg");
	RootPanel.get("htmlStrContainer").add(o);

The code is as the following

public class Overlay extends HTMLPanel{
private static String htmlStr1="<div class=\"container\"><img id=\"image\" src=\"../image/default.jpg\" alt=\"Avatar\" class=\"image\">" +
							   "<div class=\"overlay\">" +
							   		"<a href=\"#\" class=\"icon\" title=\"User Profile\">" +
							   			"<i class=\"fa-user\">" +
							   			"</i>" +
							   		"</a>" +
							   	"</div>" +
							   	"</div>";
private String imgUrl="";
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("image"));
	img.setUrl(_imgUrl);
}
}

If I have a 2 Overlay to add,

Overlay o1=new Overlay();
Overlay o2=new Overlay();
RootPanel.get("htmlStrContainer").add(o1);
RootPanel.get("htmlStrContainer").add(o2);
o1.setImage("../image/default1.jpg");
o2.setImage("../image/default2.jpg");

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?

Thanks

The document.getElementById method does not work if the element isn't attached to the document! First, either assign the HTML to some part of the document, or make a new element just for that snippet, and assign the HTML as the contents of that new element. Then, you can poke into the contents of that element and find the desired image, and tweak it until it is right.

Try this code. HTMLPanel has its own method getElementById which works even when HTMLPanel is not attached to the document.

public class Overlay extends HTMLPanel {

    private static final ContainerTemplate TEMPLATE = GWT.create(ContainerTemplate.class);

    private final String imgElementId;

    public Overlay(String imgElementId) {
        super(TEMPLATE.template(imgElementId));
        this.imgElementId = imgElementId;
    }

    public static Overlay newInstance() {
        return new Overlay(createUniqueId());
    }

    public void setImageUrl(String imgUrl) {
        getElementById(imgElementId).<ImageElement>cast().setSrc(imgUrl);
    }

    interface ContainerTemplate extends SafeHtmlTemplates {
        @Template(
                "<div class=\"container\"><img id=\"{0}\" src=\"../image/default.jpg\" alt=\"Avatar\" " +
                        "class=\"image\">" +
                        "<div class=\"overlay\">" +
                        "<a href=\"#\" class=\"icon\" title=\"User Profile\">" +
                        "<i class=\"fa-user\">" +
                        "</i>" +
                        "</a>" +
                        "</div>" +
                        "</div>")
        SafeHtml template(String imgId);
    }

}