GWT：如何更新 html 中指定的图像？

Question

我将以下 html 字符串添加到 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>";

我想通过以下代码加载另一张图片，但失败了。我检查了 Firefox 中的 html，甚至原来的 htmlStr1 也不存在。 没有 o.setImage，htmlStr1 被正确加载。

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

代码如下

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);
}
}

如果我要添加 2 个叠加层，

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");

那么，为什么只有第一个Overlay是用图片正确启动的呢？修改HTMLPanel的内容用什么最好？是否可以在附加之前修改 HTMLPanel 的内容？

谢谢

Answer 1

如果元素未附加到文档，document.getElementById 方法将不起作用！首先，要么将 HTML 分配给文档的某个部分，要么只为该片段创建一个新元素，然后将 HTML 分配为该新元素的内容。然后，您可以查看该元素的内容并找到所需的图像，并对其进行调整直到正确为止。

Answer 2

试试这个代码。 HTMLPanel 有自己的方法 getElementById，即使 HTMLPanel 未附加到文档也可以使用。

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);
    }

}

GWT：如何更新 html 中指定的图像？

GWT: How to update an image specified in html?

java

gwt