How to display an image in a QWeb report?

Question

I extended the 'report.external_layout_footer' qweb view to display image.

Below is my code in the file reports/external_layout.xml:

    <template id="report_footer_custom" inherit_id="report.external_layout_footer">
        <xpath expr="//div[@class='footer']" position="replace">
            <div class="footer">
                    <img t-att-src="'data:image/jpeg;base64,/var/www/cbl_openerp/openerp/cap_addons/cap_sale/img/footer.jpeg'"/>
                    <ul class="list-inline">
                        <li>Page:</li>
                        <li>
                            <span class="page"/>
                        </li>
                        <li>/</li>
                        <li>
                            <span class="topage"/>
                        </li>
                    </ul>
                </div>
        </xpath>
    </template>

And here is my openerp.py content :

...
"depends": ["base","sale","report"],
...
"data": ['sale.xml',
        'reports/reports.xml',
        'reports/external_layout.xml',
        'reports/informations_prestation.xml',
        'views/product_template.xml',
        'filter.xml'],
...
"images":['img/footer.jpeg',],
...

But when I print a sale order, i can't view my image at the bottom of the page.

Does anyone have any suggestions?

Answer 1

Just try this below code and set the image path from your module and run it .

<template id="report_footer_custom"inherit_id="report.external_layout_footer">
    <xpath expr="//div[@class='footer']" position="replace">
        <div class="footer">
            <img class="img img-responsive" src="/sale_order_report/static/src/img/header.jpg"/>
            <ul class="list-inline">
                <li>Page:</li>
                <li><span class="page"/></li>
                <li>/</li>
                <li><span class="topage"/></li>
            </ul>
        </div> 
    </xpath>
</template>

My side its working fine in the QWeb Report Custom Footer

Answer 2

In case you want to use an image that isn't static, here's what you can do instead.

Using the company logo as an example:

<img
  t-attf-src="data:image/*;base64,{{company.logo}}"
  t-att-alt="company.name"
  />

Using the mime type "image/*" will let you use different format of image and not just jpeg or just png.

Then as odoo render by default binary data as base64, you can simply append the content of the image after base64,.

Answer 3

The following snippet also works for QWeb reports (Odoo v10).

<span t-field="o.product_id.image_medium" t-field-options="{'widget': 'image'}"/>

...where o.product_id.image_medium is a dynamic field.