Setting the source of a picture

Standard

I’ve ever wondered why there exists a Picture-Widget that is not really documented at all. You can find information on the imageView, but thats not the same, because sometimes you need only a simple image presented in your scene.

Yep, you can do it by simple specifying a IMG-element in your template and call a

this.controller.get('imgElement').update('http://yournew/picture.png');

to get a new picture presented.
But you must also do eventually the dirty-work and check the size, height or proportion.

The Picture-Widget does all this for you!

But it is really hard to find some information on how to update this widget. It is not possible to update it simply by calling a

this.controller.modelChanged(PictureWidgetModel);

You cannot update it that way, because the picture widget is something special. It provides a IMG-element inside of a DIV-element.

Simply update the DOM via MOJO with:

this.controller.get("pictureWidget").firstChild.src = "http://your-new/image-here.png";

Or if you’re using Ares:

this.$.pictureWidget.setSrc("http://your-new/image-here.png");

You can also use an image that already exists in your application by specifying the correct path like “images/some-other-pic.png”