Image vs BackgroundImage

Hi OpenUI5 Enthusiasts,

Happy New Year 2015!

I am curious about the things comming up next...

During the develoment of an employee representation panel on SAP HANA, i figured out, that the sap.m.Image component currently does not support the use of background-images.

Comming from Sencha Touch, every image used the default mode "background" to put the image src into the style using "background-image: url(src)" while replacing img tag to a regular div tag. Using the explicit image mode (or anything else than background) the image was rendered as a regular image tag.

Trying to do the same thing with sap.m.Image is not as easy as expected, so i decided to write a small blog to demonstrate why there is a need for such an option.

Image vs BackgroundImage

Generally you can use CSS or LESS to put images into a custom class and use the image source on the background image.

In my case, the image URL is delivered through a model and each image representates an employee avatar icon. The avatar icons are also in a rectangle ratio rather than in a squared ratio and i want to put them in a styled container (rounded).

Ok, next try was using the data-attribute and render the src to the DOM (like all the sap-icons are handled), but currently this technique only works for the CSS content attribute (not the background-image).

After an enhancement request on GitHub (which is currently discussed internally), the guys gave me different ideas how to handle it (Thanks to Michael Graf).

I finally decided to use a custom notepad control to handle my needs (mostly a clone of sap.m.Image).

Hopefully this thing will be integrated into the corresponding sap.m.Image component maybe with the new property "mode" or something similar.

To use it right know, you can use my example code from JSBin.

Update 2015-02-24
The image mode will be integrated into OpenUI5 core 1.30.x (Thanks to StopCoder).
See GitHub issue for more details.

Update 2015-06-10
The current 1.29 github branch and the beta preview release contains the new included feature, therefore my custom widget is obsolete (but the code is anyway a nice feature demonstration ;-).

JS Bin