How to Show an Image in QWeb Odoo — Web, Reports & Portal (Odoo 16–19)

# Basic form — model + record ID + field name
/web/image/<model>/<id>/<field>

# With optional width/height resize
/web/image/<model>/<id>/<field>/<width>x<height>

# Using record external ID instead of integer ID
/web/image/<model>/<external_id>/<field>

# Examples:
/web/image/res.partner/42/image_1920
/web/image/product.product/7/image_1920/128x128
/web/image/res.company/1/logo

<!-- Pattern 1: Image field on the current record (e.g. inside t-foreach or a record template) -->
<img t-att-src="'/web/image/%s/%s/image_1920' % (object._name, object.id)"
     alt="Partner Image"
     style="max-width: 200px;"/>

<!-- Pattern 2: Specific model + ID (hardcoded or from a Python variable) -->
<img t-att-src="'/web/image/res.partner/' + str(partner.id) + '/image_1920'"
     alt="Partner"/>

<!-- Pattern 3: With server-side resize (128×128 thumbnail) -->
<img t-att-src="'/web/image/product.product/%d/image_1920/128x128' % product.id"
     alt="Product thumbnail"/>

<!-- Pattern 4: Company logo in a header -->
<img t-att-src="'/web/image/res.company/%d/logo' % company.id"
     alt="Company Logo"
     style="height: 60px;"/>

<!-- Pattern 5: Conditional — only render img if the field has a value -->
<img t-if="partner.image_1920"
     t-att-src="'/web/image/res.partner/%d/image_1920' % partner.id"
     alt="Partner Image"/>

<!-- CORRECT: t-field with widget='image' for PDF reports -->
<t t-foreach="docs" t-as="o">

  <!-- Company logo in report header -->
  <img t-field="o.company_id.logo"
       t-options="{'widget': 'image', 'class': 'company_logo'}"
       style="max-height: 60px;"/>

  <!-- Product image in report line -->
  <td>
    <img t-field="o.product_id.image_128"
         t-options="{'widget': 'image'}"
         style="width: 64px; height: 64px;"/>
  </td>

  <!-- Partner photo — only if present -->
  <t t-if="o.partner_id.image_1920">
    <img t-field="o.partner_id.image_1920"
         t-options="{'widget': 'image', 'class': 'partner_photo'}"
         style="width: 100px;"/>
  </t>

</t>

<!-- WRONG (broken image in PDF): -->
<!-- <img t-att-src="'/web/image/res.partner/%d/image_1920' % o.partner_id.id"/> -->

<!-- Static module image in any QWeb template (web OR PDF report) -->

<!-- Method A: absolute web path -->
<img src="/my_module/static/src/img/logo.png"
     alt="My Module Logo"
     style="height: 50px;"/>

<!-- Method B: t-att-src with module path concatenation -->
<img t-att-src="'/my_module/static/src/img/' + image_filename"
     alt="Dynamic static image"/>

<!-- Method C: using report_logo (Odoo built-in for PDF headers) -->
<!-- In ir.actions.report, set print_report_name and use the
     built-in 'web.base_layout' which already includes the company logo. -->

from odoo import models, fields

class MyModel(models.Model):
    _name = 'my.model'

    # fields.Image — recommended for Odoo 13+
    # Automatically stores multiple resolution copies (1920/1024/512/256/128)
    # when max_width/max_height are set. Stored as base64 in the database.
    image = fields.Image(
        string='Image',
        max_width=1920,
        max_height=1920,
    )

    # fields.Binary with attachment=True — for large files or non-image binaries
    # Does NOT auto-generate resized copies.
    # Store in filestore (not database column) with attachment=True.
    document = fields.Binary(
        string='Document',
        attachment=True,
    )

    # For an image that must also have thumbnail variants:
    image_1920 = fields.Image('Image', max_width=1920, max_height=1920)
    image_128 = fields.Image('Image (128)', related='image_1920',
                              max_width=128, max_height=128, store=True)