Add Image / Icon to Radio Button [duplicate]

Question

This question already has an answer here:

• Add a picture to each Radio Button in Radio Button Group 1 answer

I need to show an image for every radio button in a radio button group.

I've seen a few examples of custom radio buttons and radio button groups, but none of them is working.

Could someone please point me in the right direction?

Answer 1

The "right direction" would be to first look around what alternatives there are that can help users to achieve their goal (instead of creating a custom control and maintaining it). For example: We can easily imitate the behavior of radio buttons that can display images additionally with the following combination:

• sap.m.List with the following properties:

  mode="SingleSelectLeft"
  includeItemInSelection="true"
  backgroundDesign="Transparent"
  showSeparators="None"
  width="auto"
  

• And a subclass of ListItemBase that supports displaying images (e.g. sap.m.StandardListItem^[1] or .CustomListItem).

Run the example to see it in action:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <App>
      <List
        mode="SingleSelectLeft"
        backgroundDesign="Transparent"
        showSeparators="None"
        width="auto"
        includeItemInSelection="true"
        items="{options>/}"
      >
        <StandardListItem
          icon="{options>img}"
          title="{options>text}"
        />
      </List>
    </App>
  </mvc:View>`,
  models: {
    "options": new JSONModel([
      {
        text: "Option 1",
        img: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LDBzLS4wNTIxNiwyMC44MDk3LDU0LjM0NTYyLDUzLjg1ODgyQzQwNC40MDkyNywxMTguMDI2MDcsNDA0LjA1MzI5LDE3Ni44NTI4OSw0MDQuMDUzMjksMTg5LjE5OGMwLDUyLjQ0MDc2LTU0LjU4LDg2LjM0MDU5LTc5LjkwNDY4LDU4LjkwMzU4LDAsMCwyNC44NDkwNS0xOC40NDE4NCwyNC44NDkwNS00Ni43OTkyNywwLDAtMTguMjIyNjUsMTIuMDEwNS0yNy43NDgxMiwxNC4wODEyOSwwLDAsMTIuNDI0NTMtMjEuOTUwMjEsNi42MjY0LTYwLjQ2NjMxLDAsMC05LjkzOTQ5LDE5LjQ2NTE3LTQxLjgyOTE5LDM1LjIwMywwLDAsMTIuNDI0NTMtMjcuNzQ4MTIuODI4MjctNTQuMjUzOTQsMCwwLDIuNDg0ODIsMzMuMTMyMjItNzIuODkwODMsNjguMzM1LTc1LjM3NTY1LDM1LjIwMy01Mi4xODMxNCw3MC40MDU4MS01Mi4xODMxNCw3MC40MDU4MXMxNS4wMjU2MS0xNS45NTU5NCw0MC41MzUyMi00Ljc0OTgxYzM0LjUxMTI0LDE1LjE2MDM5LDIwLjU2NDU1LDc1Ljk5ODM5LTM0LjkzMTksNzUuOTk4MzktNTQuMDMwODgsMC04OS40OTUzMy01OC43NTktODkuNDk1MzMtMTA0LjY0MTg3LDAtMTguOTcxLDIuMDU2NS01My44NzMzNSwzNi4zMzE1MS05Mi4yNjEzNiwyNy4yNjE2Mi0zMC41MzMsNjAuODc3OC00Ni42NDIzOSw2OC4wOTMtODAuNDA1NjhDMTQ0Ljk3MzgxLDEwMy4xNjQ2Myw3Ny42MTQyMiwxMjUuNzU2MywzNy41NTYyMiwxODQuOTk4NzNjLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDhDNDkuMTA5NDEsNDI4LjQzNTQsMTQwLjEzOTY0LDUwMCwyNDcuODg0NTMsNTAwYzEzMS41MDI5MywwLDIzOS40Nzc4OS0xMDUuMjMzMTksMjM5LjQ3Nzg5LTIzNi43MzU4OUM0ODcuMzYyNDMsNjQuMTgyMTQsMjk4LjA5ODIsNDMuMDU3NTQsMjQ0LjQ0NjQ1LDBaTTIxMi41ODYsMjQzLjcwODc3Yy00LjAwNzQ1LjkzMjQ4LTcuODQ0MjMtLjc0NDMxLTE0LjI0NzYzLTIuNjkxNzMtNS45ODcxLTEuODIwODEtOC4xMDY3Mi0xLjQ3MjIyLTguMTA2NzItMS40NzIyMmExMDEuNDUzMDksMTAxLjQ1MzA5LDAsMCwxLDEyLjY3MDQzLTcuMjY3MDljNi4zNjA2Mi0yLjkyODY5LDExLjc5MzgtMy4wODEyMiwxNC4zMjEsMi43NDZDMjE4Ljg4NDM4LDIzOC44NTQzOSwyMTUuODcxMDksMjQyLjk0NDIyLDIxMi41ODYsMjQzLjcwODc3WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMzY3Ljk3OTMxIiB5MT0iNDY4LjA5OTY3IiB4Mj0iMTM0LjQwMjk5IiB5Mj0iNjMuNTMzNjIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxOTczYjQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NGI5ZGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+LTwvdGl0bGU+PGcgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik0yNDQuNDQ2NDUsMHMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJDNDA0LjQwOTI3LDExOC4wMjYwNyw0MDQuMDUzMjksMTc2Ljg1Mjg5LDQwNC4wNTMyOSwxODkuMTk4YzAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAzLjE2NDYzLDc3LjYxNDIyLDEyNS43NTYzLDM3LjU1NjIyLDE4NC45OTg3M2MtMzUuOTgwOSw1My4yMTI3NC0yNC4yOTkwOCwxMjMuNTk3MzMtMTcuODIxODYsMTQ1LjI0OEM0OS4xMDk0MSw0MjguNDM1NCwxNDAuMTM5NjQsNTAwLDI0Ny44ODQ1Myw1MDBjMTMxLjUwMjkzLDAsMjM5LjQ3Nzg5LTEwNS4yMzMxOSwyMzkuNDc3ODktMjM2LjczNTg5QzQ4Ny4zNjI0Myw2NC4xODIxNCwyOTguMDk4Miw0My4wNTc1NCwyNDQuNDQ2NDUsMFoiIGZpbGw9IiMxOTczYjQiLz48cGF0aCBkPSJNMjkyLjA0NSwzMTEuODUyNThzNS45NzQzMyw5NC41ODIwNy0xMDYuMDU5NywxMDguNTI5OTFDMTEyLjgyMzcxLDQyOS40OTA4NSw1NS4yNDE0OSwzODIuODY5NjEsMzAuMjU4NzMsMzIzLjQ4N2MtMTcuMzkyMTMtNDEuMzQwMDctMTguOTg1MDctODguODY0ODcuOTYzNjMtMTI4LjA3NzE4LDAsMC03Mi42NTUxNiw2OS4yNDk5Mi02OS4zMTQ0NCwxNzIuODkxNjRDLTM0LjYyMzE1LDQ3NS45MjExMSw1MC41MzI0Nyw2MTcuMzUzODcsMzcwLjAwMDQ2LDU3Ni40MjIsNDc2LjIxMTM3LDU2Mi44MTM3Niw1MTUuMTY3LDQxMy45ODgxMSw1MTYuNzQxNjIsMzI1LjYyMmMxLjk1Nzg3LTEwOS44NzQ4Mi00OS40NTM0OC0xNjEuOTUzNzYtNDkuNDUzNDgtMTYxLjk1Mzc2czI2LjgzMTMyLDc3LjYzMjUyLTM1LjAxMDQzLDEzOS40NzQyN0MzOTcuODE4NywzMzcuNjAxNDksMzM5LjE4NTQ5LDM0OS41MjU2OSwyOTIuMDQ1LDMxMS44NTI1OFoiIGZpbGw9IiM1NGI5ZGUiIG9wYWNpdHk9IjAuNCIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOmxpZ2h0ZW4iLz48cGF0aCBkPSJNNDY0LjUwNTExLDM2Ni43MjYyNFMzNTcuNjkyLDM5OS4zMTgzLDI5Mi4wNDUsMzExLjg1MjU4YzAsMCwyOC43MTkyMywxMTEuMzIyNTYtOTMuNjU3NzUsMTgzLjYxNjQ0LDAsMCw0Mi40MDA3OSwxMjUuNzEwNjUsMTgyLjQ1NzMxLDYzLjMwMjY2QzQyNS43ODQxNyw1MzguNzQ3LDQ1OS42MzkyOCw0NDEuOTc0Niw0NjQuNTA1MTEsMzY2LjcyNjI0WiIgZmlsbD0iIzU0YjlkZSIgb3BhY2l0eT0iMC42IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bGlnaHRlbiIvPjxwYXRoIGQ9Ik0yNzguNTQ0MzYsNTI3LjEwMTA2UzM0NS4zNzAzLDQ0MS45MDE4NywyOTIuMDQ1LDMxMS44NTI1OGMwLDAsNDcuODgxNDYsOTcuODIxOSwxMzMuNzAwMTIsMTMyLjM5MzZDNDI1Ljc0NTE0LDQ0NC4yNDYxOCwzNzQuNDI2MzYsNTMwLjE1ODA2LDI3OC41NDQzNiw1MjcuMTAxMDZaIiBmaWxsPSIjNTRiOWRlIiBvcGFjaXR5PSIwLjgiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpsaWdodGVuIi8+PHBhdGggZD0iTTIzMC43NzY5NSwyNDguNjk0ODdjNDEuOTI5NDUtMjEuNjEzMTIsNTUuMzcwMTEtNTguNjQyMzEsNTUuMzcwMTEtNTguNjQyMzFzMTIuNDI1MzYtMjcuNzYzMzguODIwNTItNTQuMjg4ODFjMCwwLDIuNDg2NjYsMzMuMTU2NzMtNzIuOTQ0NzYsNjguMzg1NTctNzUuNDMxNDIsMzUuMjI5MDUtNTIuMjIxNzUsNzAuNDU3ODktNTIuMjIxNzUsNzAuNDU3ODksMy45NDk4LTMuNTIxNDMsNy43MDc2Ny01Ljg5NDYxLDE1LjE1NDg1LTcuODk4MDhDMTg5LjM2Nzg3LDI2My4zNywyMDguOTA0MjQsMjU5Ljk2OTQ2LDIzMC43NzY5NSwyNDguNjk0ODdaIiBmaWxsPSIjNTRiOWRlIiBvcGFjaXR5PSIwLjYiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpvdmVybGF5Ii8+PHBhdGggZD0iTTIzMi45MzgyNiwyNjQuMDQwMTljMzIuNDA1NiwwLDY5Ljg5My0xNS4wNjI1NCw4OC40NDMyNi00OC42OTUxOSwyLjg5ODctNS4yNTU1LDUuNDgxMDctMTMuNzg4MzEsNi43NjQ5MS0yMS44MTY1NCwyLjA0NjI5LTEyLjc5NjEyLDIuMjU3NzktMjIuMzE2NzUtLjEwODA3LTM5LjYwNiwwLDAtNi4xNDI2MSwxNy4yMDQ1My00MS44OTEzMSwzNi4xMzAxNC0xMi45NzU5NCw2Ljg2OTU1LTI5LjYxMTcyLDEzLjczOTMtNTEuNjEwNjgsMjAuNDE1NjItODUuMjM4NSwyNS44Njg0OS03Mi43MzUzMSw2NC4xMzktNzIuNzM1MzEsNjQuMTM5QzE3NS4yMzM2MSwyNjUuNzE2MjgsMTc1LjMxNDY2LDI2NC4wNDAxOSwyMzIuOTM4MjYsMjY0LjA0MDE5WiIgZmlsbD0iIzU0YjlkZSIgb3BhY2l0eT0iMC40IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjxwYXRoIGQ9Ik0yMzIuOTM4MjYsMjY0LjA0MDE5YzI5Ljc5MTI2LDAsNzAuMjkzNjUsMS42NzUyNiw5MS4zMzA0OC0xNS45NTgxOSwxMi45MDExNy0xMC44MTQsMjQuNjgwMzItMjUuMTA1NjcsMjQuOTAyMTctNDYuODg0NywwLDAtMTcuNjQ3NDMsMTEuNjQ3ODgtMjcuNzkzLDE0LjE1MjMzLTE0LjAzNDIyLDMuNDY0MzYtMzkuMjg3LDguNzc3NTYtNjIuMzkxLDcuNDY2MS03OC40MDU0MS00LjQ1MDU1LTk3LjE4NTgsNTEuNzkxNDgtOTcuMTg1OCw1MS43OTE0OEMxNzIuNjEzLDI2NC42MDg2LDE4NS43NywyNjQuMDQwMTksMjMyLjkzODI2LDI2NC4wNDAxOVoiIGZpbGw9IiM1NGI5ZGUiIG9wYWNpdHk9IjAuMiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOm92ZXJsYXkiLz48cGF0aCBkPSJNMjQ0LjQ0NjQ1LDBzLS4wNTIxNiwyMC44MDk3LDU0LjM0NTYyLDUzLjg1ODgyQzQwNC40MDkyNywxMTguMDI2MDcsNDA0LjA1MzI5LDE3Ni44NTI4OSw0MDQuMDUzMjksMTg5LjE5OGMwLDUyLjQ0MDc2LTU0LjU4LDg2LjM0MDU5LTc5LjkwNDY4LDU4LjkwMzU4LDAsMCwyNC44NDkwNS0xOC40NDE4NCwyNC44NDkwNS00Ni43OTkyNywwLDAtMTguMjIyNjUsMTIuMDEwNS0yNy43NDgxMiwxNC4wODEyOSwwLDAsMTIuNDI0NTMtMjEuOTUwMjEsNi42MjY0LTYwLjQ2NjMxLDAsMC05LjkzOTQ5LDE5LjQ2NTE3LTQxLjgyOTE5LDM1LjIwMywwLDAsMTIuNDI0NTMtMjcuNzQ4MTIuODI4MjctNTQuMjUzOTQsMCwwLDIuNDg0ODIsMzMuMTMyMjItNzIuODkwODMsNjguMzM1LTc1LjM3NTY1LDM1LjIwMy01Mi4xODMxNCw3MC40MDU4MS01Mi4xODMxNCw3MC40MDU4MXMxNS4wMjU2MS0xNS45NTU5NCw0MC41MzUyMi00Ljc0OTgxYzM0LjUxMTI0LDE1LjE2MDM5LDIwLjU2NDU1LDc1Ljk5ODM5LTM0LjkzMTksNzUuOTk4MzktNTQuMDMwODgsMC04OS40OTUzMy01OC43NTktODkuNDk1MzMtMTA0LjY0MTg3LDAtMTguOTcxLDIuMDU2NS01My44NzMzNSwzNi4zMzE1MS05Mi4yNjEzNiwyNy4yNjE2Mi0zMC41MzMsNjAuODc3OC00Ni42NDIzOSw2OC4wOTMtODAuNDA1NjhDMTQ0Ljk3MzgxLDEwMy4xNjQ2Myw3Ny42MTQyMiwxMjUuNzU2MywzNy41NTYyMiwxODQuOTk4NzNjLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDhDNDkuMTA5NDEsNDI4LjQzNTQsMTQwLjEzOTY0LDUwMCwyNDcuODg0NTMsNTAwYzEzMS41MDI5MywwLDIzOS40Nzc4OS0xMDUuMjMzMTksMjM5LjQ3Nzg5LTIzNi43MzU4OUM0ODcuMzYyNDMsNjQuMTgyMTQsMjk4LjA5ODIsNDMuMDU3NTQsMjQ0LjQ0NjQ1LDBaIiBmaWxsPSJ1cmwoI2IpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjwvZz48L2c+PC9zdmc+",
      },
      {
        text: "Option 2",
        img: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaTTIxMi41ODYsMjQzLjIxNzUyYy00LjAwNzQ1LjkzMjQ4LTcuODQ0MjMtLjc0NDMxLTE0LjI0NzYzLTIuNjkxNzMtNS45ODcxLTEuODIwODEtOC4xMDY3Mi0xLjQ3MjIyLTguMTA2NzItMS40NzIyMmExMDEuNDUzMDksMTAxLjQ1MzA5LDAsMCwxLDEyLjY3MDQzLTcuMjY3MDljNi4zNjA2Mi0yLjkyODY5LDExLjc5MzgtMy4wODEyMiwxNC4zMjEsMi43NDZDMjE4Ljg4NDM4LDIzOC4zNjMxNCwyMTUuODcxMDksMjQyLjQ1MywyMTIuNTg2LDI0My4yMTc1MloiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjM2Ny45NzkzMSIgeTE9IjQ2Ny42MDg0MiIgeDI9IjEzNC40MDI5OSIgeTI9IjYzLjA0MjM3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmY1YTM3Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZhNTJkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPi08L3RpdGxlPjxnIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaIiBmaWxsPSIjZmY1YTM3Ii8+PHBhdGggZD0iTTI5Mi4wNDUsMzExLjM2MTM0czUuOTc0MzMsOTQuNTgyMDctMTA2LjA1OTcsMTA4LjUyOTkxYy03My4xNjE2MSw5LjEwODM2LTEzMC43NDM4My0zNy41MTI4OS0xNTUuNzI2NTktOTYuODk1NDYtMTcuMzkyMTMtNDEuMzQwMDctMTguOTg1MDctODguODY0ODcuOTYzNjMtMTI4LjA3NzE4LDAsMC03Mi42NTUxNiw2OS4yNDk5Mi02OS4zMTQ0NCwxNzIuODkxNjQsMy40Njg5NCwxMDcuNjE5NjMsODguNjI0NTYsMjQ5LjA1MjM4LDQwOC4wOTI1NSwyMDguMTIwNTVDNDc2LjIxMTM3LDU2Mi4zMjI1MSw1MTUuMTY3LDQxMy40OTY4Nyw1MTYuNzQxNjIsMzI1LjEzMDcyLDUxOC42OTk0OSwyMTUuMjU1OSw0NjcuMjg4MTQsMTYzLjE3Nyw0NjcuMjg4MTQsMTYzLjE3N3MyNi44MzEzMiw3Ny42MzI1Mi0zNS4wMTA0MywxMzkuNDc0MjdDMzk3LjgxODcsMzM3LjExMDI1LDMzOS4xODU0OSwzNDkuMDM0NDUsMjkyLjA0NSwzMTEuMzYxMzRaIiBmaWxsPSIjZmZhNTJkIiBvcGFjaXR5PSIwLjQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpsaWdodGVuIi8+PHBhdGggZD0iTTQ2NC41MDUxMSwzNjYuMjM1UzM1Ny42OTIsMzk4LjgyNzA1LDI5Mi4wNDUsMzExLjM2MTM0YzAsMCwyOC43MTkyMywxMTEuMzIyNTYtOTMuNjU3NzUsMTgzLjYxNjQ0LDAsMCw0Mi40MDA3OSwxMjUuNzEwNjUsMTgyLjQ1NzMxLDYzLjMwMjY2QzQyNS43ODQxNyw1MzguMjU1NzMsNDU5LjYzOTI4LDQ0MS40ODMzNSw0NjQuNTA1MTEsMzY2LjIzNVoiIGZpbGw9IiNmZmE1MmQiIG9wYWNpdHk9IjAuNiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOmxpZ2h0ZW4iLz48cGF0aCBkPSJNMjc4LjU0NDM2LDUyNi42MDk4MVMzNDUuMzcwMyw0NDEuNDEwNjMsMjkyLjA0NSwzMTEuMzYxMzRjMCwwLDQ3Ljg4MTQ2LDk3LjgyMTksMTMzLjcwMDEyLDEzMi4zOTM2QzQyNS43NDUxNCw0NDMuNzU0OTQsMzc0LjQyNjM2LDUyOS42NjY4MiwyNzguNTQ0MzYsNTI2LjYwOTgxWiIgZmlsbD0iI2ZmYTUyZCIgb3BhY2l0eT0iMC44IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bGlnaHRlbiIvPjxwYXRoIGQ9Ik0yMzAuNzc2OTUsMjQ4LjIwMzYzYzQxLjkyOTQ1LTIxLjYxMzEyLDU1LjM3MDExLTU4LjY0MjMxLDU1LjM3MDExLTU4LjY0MjMxczEyLjQyNTM2LTI3Ljc2MzM4LjgyMDUyLTU0LjI4ODgxYzAsMCwyLjQ4NjY2LDMzLjE1NjczLTcyLjk0NDc2LDY4LjM4NTU3LTc1LjQzMTQyLDM1LjIyOTA1LTUyLjIyMTc1LDcwLjQ1Nzg5LTUyLjIyMTc1LDcwLjQ1Nzg5LDMuOTQ5OC0zLjUyMTQzLDcuNzA3NjctNS44OTQ2MSwxNS4xNTQ4NS03Ljg5ODA4QzE4OS4zNjc4NywyNjIuODc4NzYsMjA4LjkwNDI0LDI1OS40NzgyMiwyMzAuNzc2OTUsMjQ4LjIwMzYzWiIgZmlsbD0iI2ZmYTUyZCIgb3BhY2l0eT0iMC42IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjxwYXRoIGQ9Ik0yMzIuOTM4MjYsMjYzLjU0ODk0YzMyLjQwNTYsMCw2OS44OTMtMTUuMDYyNTQsODguNDQzMjYtNDguNjk1MTksMi44OTg3LTUuMjU1NSw1LjQ4MTA3LTEzLjc4ODMxLDYuNzY0OTEtMjEuODE2NTQsMi4wNDYyOS0xMi43OTYxMiwyLjI1Nzc5LTIyLjMxNjc1LS4xMDgwNy0zOS42MDYsMCwwLTYuMTQyNjEsMTcuMjA0NTMtNDEuODkxMzEsMzYuMTMwMTQtMTIuOTc1OTQsNi44Njk1NS0yOS42MTE3MiwxMy43MzkzLTUxLjYxMDY4LDIwLjQxNTYyLTg1LjIzODUsMjUuODY4NDktNzIuNzM1MzEsNjQuMTM5LTcyLjczNTMxLDY0LjEzOUMxNzUuMjMzNjEsMjY1LjIyNSwxNzUuMzE0NjYsMjYzLjU0ODk0LDIzMi45MzgyNiwyNjMuNTQ4OTRaIiBmaWxsPSIjZmZhNTJkIiBvcGFjaXR5PSIwLjQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpvdmVybGF5Ii8+PHBhdGggZD0iTTIzMi45MzgyNiwyNjMuNTQ4OTRjMjkuNzkxMjYsMCw3MC4yOTM2NSwxLjY3NTI2LDkxLjMzMDQ4LTE1Ljk1ODE5LDEyLjkwMTE3LTEwLjgxNCwyNC42ODAzMi0yNS4xMDU2NywyNC45MDIxNy00Ni44ODQ3LDAsMC0xNy42NDc0MywxMS42NDc4OC0yNy43OTMsMTQuMTUyMzMtMTQuMDM0MjIsMy40NjQzNi0zOS4yODcsOC43Nzc1Ni02Mi4zOTEsNy40NjYxLTc4LjQwNTQxLTQuNDUwNTUtOTcuMTg1OCw1MS43OTE0OC05Ny4xODU4LDUxLjc5MTQ4QzE3Mi42MTMsMjY0LjExNzM2LDE4NS43NywyNjMuNTQ4OTQsMjMyLjkzODI2LDI2My41NDg5NFoiIGZpbGw9IiNmZmE1MmQiIG9wYWNpdHk9IjAuMiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOm92ZXJsYXkiLz48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaIiBmaWxsPSJ1cmwoI2IpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjwvZz48L2c+PC9zdmc+",
      },
      {
        text: "Option 3",
        img: "sap-icon://sap-ui5",
      },
    ])
  }
}).then(view => view.placeAt("content"))));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
></script><body id="content" class="sapUiBody" style="height: 100%;"></body>

---

^{[1]: In case of sap.m.StandardListItem, be aware that it supports only images in quadrat proportions.src Images with diverse proportions will be displayed improperly.}

Answer 2

I achieved the image radio button option :

1. I grouped an image and radio button inside a container for vertical/horizontal alignment(VBox/HBox).
2. All we need to do is aggregate the number of options. For this I've used a parent Container.

Hence, there are two containers: one, for overall containment and other for radiobutton/image aligment.

Result:

1. Image Above RadioButton:

1. Image with radiobutton

Code:

Data :

         var data = {
                    answers: [
                        {
                            AnswerLabel: "Excellent",
                            SmileyUrl :"./images/satisfied.jpg"
                        },
                        {
                            AnswerLabel: "Good",
                            SmileyUrl :"./images/good.jpg"
                        },
                        {
                            AnswerLabel: "Neutal",
                            SmileyUrl :"./images/neutral.jpg"
                        },
                        {
                            AnswerLabel: "Poor",
                            SmileyUrl :"./images/bad.jpg"
                        },
                        {
                            AnswerLabel: "Horrible",
                            SmileyUrl :"./images/horrible.jpg"
                        }
                    ]
            };
            var model = new sap.ui.model.json.JSONModel(data);
            this.getView().setModel(model, "view");

View :

1. Image Above RadioButton:

       <HBox items="{view>/answers}" 
           justifyContent="SpaceAround" 
           class='sapUiMediumMarginTop'> <!-- This is Parent Container -->
           <VBox alignItems='Center'> <!-- Alignment of radioButton and image. Change to VBox/HBox for vertical/horizontal alignment -->
               <items>
                   <Image 
                       src="{view>SmileyUrl}" 
                       width="3rem"/> <!-- Image to be displayed -->
                   <RadioButton
                       groupName='answers'
                       text="{view>AnswerLabel}" /> 
               </items>
           </HBox>
       </VBox>
   

2. Image Alongside radiobutton

           <HBox items="{view>/answers}" 
           justifyContent="SpaceAround" 
           class='sapUiMediumMarginTop'> <!-- This is Parent Container -->
           <HBox alignItems='Center'> <!-- Alignment of radioButton and image. Change to VBox/HBox for vertical/horizontal alignment -->
               <items>
                   <Image 
                       src="{view>SmileyUrl}" 
                       width="3rem"/> <!-- Image to be displayed -->
                   <RadioButton
                       groupName='answers'
                       text="{view>AnswerLabel}" /> 
               </items>
           </HBox>
       </HBox>
   

Let me know if you need more explanation and information.