Display Images in divTemplate

I'm unable to display images in the divTemplate.


I figured out (by trial and error) to use an "card" element to group elements together, but still cannot show Images (even not in Buttons)

My code looks something like this:


<?xml version="1.0" encoding="UTF-8" ?>
  <document>
  <head>
  <style>
  .wrapper {
  width: 1000;
  tv-position: top;
  margin: 50 0 0 460;
  }
  .upperLeftCard {
  width: 400;
  height: 400;
  background-color: red;
  tv-align: left;
  tv-position: top-left;
  }
  .upperRightCard {
  width: 400;
  height: 400;
  background-color: green;
  tv-align: right;
  tv-position: top-right;
  }
  .cardElement {
  background-color: white;
  tv-position: top-left;
  width: 400;
  font-size: 24;
  }
  </style>
  </head>
  <divTemplate>
  <card class="wrapper">
  <card class="upperLeftCard">
  <description class="cardElement">Upper Left Wrapper</description>
  </card>
  <card class="upperRightCard">
  <buttonLockup class="cardElement">
  <badge src="${this.BASEURL}resources/images/italy/italy_20_square.jpg" />
  <title>BUTTON</title>
  </buttonLockup>
  </card>
  </card>
  </divTemplate>
  </document>
Accepted Answer

In case someone is facing the same problem, here is my current working solution 😉


...
<divTemplate>
  <banner class="banner">
       <img src="${this.BASEURL}resources/images/italy/italy_20_square.jpg" width="1000" height="1000"/>
  </banner>
</divTemplate>
...

I did not see any img elements in original XML, for images width and height attributes are required. Even after specifying width and height it doesn't work, please file a bug report.

Display Images in divTemplate
 
 
Q