How to access an Image Dom Element with Vaadin/GWT?

问题

I have an HTML Dom looking like this:

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

I'm trying to change the img Source, so i made the following to access the image without success:

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

How can i get the <img> dom element as Image then change its Source?

回答1:

Get the ImageElement with

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

or create an Image widget by wrapping the existing img element like in

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

As mentioned by Saeed Zarinfam it gets easier if you assign an unique id to the image itself.

回答2:

You have to assign an id to your image tag:

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

Then you can access to it using following code:

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

Or if you do not want to assign an id to your image tag, you can use following code:

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

来源：https://stackoverflow.com/questions/13948089/how-to-access-an-image-dom-element-with-vaadin-gwt