Rendering images

The last column of our report will feature the list of followers, with the avatars. We will use the media-list Bootstrap component and a loop through the followers to render each one of them:

<!-- Render followers --> 
<ul class="media-list"> 
  <t t-foreach="o.message_follower_ids" t-as="f"> 
    <li t-if="f.partner_id.image_small"  
      class="media-left"> 
      <img class="media-object" 
        t-att-src="'data:image/png;base64,%s' %  
          f.partner_id.image_small" 
        style="max-height: 24px;" /> 
      <span class="media-body"  
        t-field="f.partner_id.name" /> 
    </li> 
  </t> 
</ul> 

The content of binary fields is provided in a base64 representation. The <img> element can directly accept this type of data for the src attribute. Thus we can use the t-att-src QWeb directive to dynamically generate each of the images...