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:

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

This is for anyone working with odoo12 or an approximate version. The reports module is web and not report. Odoo introduced styled reports and this snippet extends each one of them.

<?xml version='1.0' encoding='utf-8'?>
<odoo>
    <data noupdate="0">
        <!-- The external layout background header -->
        <template id="external_layout_background_inherit" inherit_id="web.external_layout_background">

            <xpath expr="//div[@class='header']" position="replace">
                <div class="header">
                    <div class="o_background_header">
                        <div class="row" style="width: 100%; margin: 0 auto;">
                            <img src="extend_layout/static/src/img/header.jpg" style="width:100%;" />
                        </div>
                    </div>
                </div>
            </xpath>

        </template>

        <!-- The external layout boxed header -->
        <template id="external_layout_boxed_inherit" inherit_id="web.external_layout_boxed">

            <xpath expr="//div[@class='header']" position="replace">
                <div class="header">
                    <div class="o_boxed_header">
                        <div class="row" style="width: 100%; margin: 0 auto;">
                            <img src="extend_layout/static/src/img/header.jpg" style="width:100%;" />
                        </div>
                    </div>
                </div>
            </xpath>

        </template>

        <!-- The external layout clean header -->
        <template id="external_layout_clean_inherit" inherit_id="web.external_layout_clean">

            <xpath expr="//div[@class='header']" position="replace">
                <div class="header">
                    <div class="o_clean_header">
                        <div class="row" style="width: 100%; margin: 0 auto;">
                            <img src="extend_layout/static/src/img/header.jpg" style="width:100%;" />
                        </div>
                    </div>
                </div>
            </xpath>

        </template>

        <!-- The external layout standad header -->
        <template id="external_layout_standard_inherit" inherit_id="web.external_layout_standard">

            <xpath expr="//div[@class='header']" position="replace">
                <div class="header">
                    <div class="row" style="width: 100%; margin: 0 auto;">
                        <img src="extend_layout/static/src/img/header.jpg" style="width:100%;" />
                    </div>
                </div>
            </xpath>

        </template>

        <!-- Remove company address from the reports -->
        <template id="address_layout_inherit" inherit_id="web.address_layout">

            <xpath expr="//div[@class='address row']" position="replace">
                <div style="height: 50px;"></div>
            </xpath>

        </template>
    </data>
</odoo>

Answer 3

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 4

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.