Question

我有一个像这样的HTML Dom：

<div class="mydiv" id="mydivId">
  <img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false">
</div>

我正在尝试更改img Source，所以我做了以下访问图片但没有成功：

Image imageElement = (Image) Document.get()
                    .getElementById("mydivId")
                    .getElementsByTagName("img").getItem(0);

如何将<img> dom元素作为Image然后更改其源？

Answer 1

您必须为图片代码分配ID：

<div class="mydiv" id="mydivId">
  <img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false" id="myImgId">
</div>

然后您可以使用以下代码访问它：

Element elem = DOM.getElementById("myImgId");
Window.alert(elem.getAttribute("src"));

或者，如果您不想为图片标记分配ID，可以使用以下代码：

Element elem = DOM.getElementById("mydivId");
Window.alert(elem.getFirstChildElement().getAttribute("src"));

Answer 2

使用

获取ImageElement

ImageElement image = (ImageElement) DOM.getElementById("mydivId").getFirstChildElement();

或通过包装现有的img元素来创建Image小部件，如

Image img = Image.wrap(DOM.getElementById("mydivId").getFirstChildElement());

正如Saeed Zarinfam所提到的，如果你为图像本身分配一个唯一的ID，它会变得更容易。

如何使用Vaadin / GWT访问Image Dom元素？

2 个答案: