diff --git a/addons/coupon/report/coupon_report_templates.xml b/addons/coupon/report/coupon_report_templates.xml
index 6051fefdddc..1d4259ac62a 100644
--- a/addons/coupon/report/coupon_report_templates.xml
+++ b/addons/coupon/report/coupon_report_templates.xml
@@ -67,7 +67,7 @@
                                     </small>
                                 </p>
                                 <br/>
-                                <img alt="Barcode" t-att-src="'/report/barcode/Code128/%s' % o.code"/>
+                                <div t-field="o.code" t-options="{'widget': 'barcode', 'width': 600, 'height': 100}"/>
                                 <br/><br/>
                                 <h4>Thank you,</h4>
                                 <br/>
diff --git a/addons/hr/report/hr_employee_badge.xml b/addons/hr/report/hr_employee_badge.xml
index 3a8fa9fdfb5..0668f54608d 100644
--- a/addons/hr/report/hr_employee_badge.xml
+++ b/addons/hr/report/hr_employee_badge.xml
@@ -35,7 +35,7 @@
                                 <table style="width:155pt; height:85pt">
                                     <tr><th><div style="font-size:15pt; margin-bottom:0pt;margin-top:0pt;" align="center"><t t-esc="employee.name"/></div></th></tr>
                                     <tr><td><div align="center" style="font-size:10pt;margin-bottom:5pt;"><t t-esc="employee.job_id.name"/></div></td></tr>
-                                    <tr><td><img alt="barcode" t-if="employee.barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', employee.barcode, 600, 120)" style="max-height:50pt;max-width:100%;" align="center"/></td></tr>
+                                    <tr><td><div t-if="employee.barcode" t-field="employee.barcode" t-options="{'widget': 'barcode', 'width': 600, 'height': 120, 'img_style': 'max-height:50pt;max-width:100%;', 'img_align': 'center'}"/></td></tr>
                                 </table>
                             </td>
                         </table>
diff --git a/addons/mrp/report/mrp_production_templates.xml b/addons/mrp/report/mrp_production_templates.xml
index 42a4f61bdc4..cfeb3cc8eb7 100644
--- a/addons/mrp/report/mrp_production_templates.xml
+++ b/addons/mrp/report/mrp_production_templates.xml
@@ -12,7 +12,7 @@
                         </div>
                         <div class="col-5">
                             <span class="text-right">
-                                <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:350px;height:60px"/>
+                                <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:350px;height:60px'}"/>
                             </span>
                         </div>
                     </div>
@@ -95,7 +95,7 @@
                                     </td>
                                     <td t-if="has_product_barcode" width="15%" class="text-center">
                                         <t t-if="raw_line.product_id.barcode">
-                                            <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', raw_line.product_id.barcode, 600, 100)" style="width:100%;height:35px" alt="Barcode"/>
+                                            <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:100%;height:35px'}"/>
                                         </t>
                                     </td>
                                 </tr>
@@ -152,7 +152,7 @@
                                             <tr>
                                                 <td class="text-center align-middle">
                                                     <t t-if="move_line.lot_name or move_line.lot_id">
-                                                        <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', move_line.lot_name or move_line.lot_id.name, 600, 150)" style="width:100%;height:4rem" alt="Barcode"/>
+                                                        <div t-field="move_line.lot_name or move_line.lot_id.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:4rem'}"/>
                                                         <span t-esc="move_line.lot_name or move_line.lot_id.name"/>
                                                     </t>
                                                     <t t-else="">
@@ -165,8 +165,8 @@
                                             <tr>
                                                 <td class="text-center align-middle" style="height: 6rem;">
                                                     <t t-if="move_line.product_id.barcode">
-                                                            <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', move_line.product_id.barcode, 600, 150)" style="width:100%;height:4rem" alt="Barcode"/>
-                                                            <span t-esc="move_line.product_id.barcode"/>
+                                                        <div t-field="move_line.product_id.barcode" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:4rem'}"/>
+                                                        <span t-esc="move_line.product_id.barcode"/>
                                                     </t>
                                                     <t t-else="">
                                                         <span class="text-muted">No barcode available</span>
diff --git a/addons/point_of_sale/views/report_userlabel.xml b/addons/point_of_sale/views/report_userlabel.xml
index 33281bb4c18..e6730acf9f0 100644
--- a/addons/point_of_sale/views/report_userlabel.xml
+++ b/addons/point_of_sale/views/report_userlabel.xml
@@ -14,7 +14,7 @@
                         </thead>
                         <tbody>
                             <tr>
-                                <td><img t-if="user.barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', user.barcode, 300, 50)" style="width:100%;height:35%;" alt="Barcode"/></td>
+                                <td><div t-if="user.barcode" t-field="user.barcode" t-options="{'widget': 'barcode', 'symbology': 'EAN13', 'width': 300, 'height': 50, 'img_style': 'width:100%;height:35%;'}"/></td>
                                 <td><strong t-field="user.name"/></td>
                             </tr>
                         </tbody>
diff --git a/addons/product/report/product_packaging.xml b/addons/product/report/product_packaging.xml
index e9f462bc7cd..c31164256fa 100644
--- a/addons/product/report/product_packaging.xml
+++ b/addons/product/report/product_packaging.xml
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<odoo>
-    <data>
-        <template id="report_packagingbarcode">
-            <t t-call="web.basic_layout">
-                <div class="page">
-                    <t t-foreach="docs" t-as="packaging">
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <data>
+        <template id="report_packagingbarcode">
+            <t t-call="web.basic_layout">
+                <div class="page">
+                    <t t-foreach="docs" t-as="packaging">
                         <div class="col-4" style="padding:0;">
                             <table class="table table-condensed" style="border-bottom: 0px solid white !important;width: 3in;">
                                 <tr>
@@ -29,18 +29,16 @@
                                   <t t-if="packaging.barcode">
                                     <tr>
                                     <td style="text-align: center; vertical-align: middle;" class="col-5">
-                                        <img alt="Barcode" t-if="len(packaging.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', packaging.barcode, 600, 150)" style="width:100%;height:20%;"/>
-                                        <img alt="Barcode" t-elif="len(packaging.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN8', packaging.barcode, 600, 150)" style="width:100%;height:20%;"/>
-                                        <img alt="Barcode" t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', packaging.barcode, 600, 150)" style="width:100%;height:20%;"/>
+                                        <div t-field="packaging.barcode" t-options="{'widget': 'barcode', 'symbology': 'auto', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:20%;'}"/>
                                         <span t-field="packaging.barcode"/>
                                     </td>
                                 </tr>
                               </t>
                             </table>
-                        </div>
-                    </t>
-                </div>
-            </t>
-        </template>
-    </data>
-</odoo>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </template>
+    </data>
+</odoo>
diff --git a/addons/product/report/product_product_templates.xml b/addons/product/report/product_product_templates.xml
index 564fe745cf4..822f3b415d6 100644
--- a/addons/product/report/product_product_templates.xml
+++ b/addons/product/report/product_product_templates.xml
@@ -18,9 +18,7 @@
                     <tr>
                         <td class="text-center align-middle" style="height: 6rem">
                             <t t-if="product.barcode">
-                                <img alt="Barcode" t-if="len(product.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height::4rem;"/>
-                                <img alt="Barcode" t-elif="len(product.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN8', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height::4rem;"/>
-                                <img alt="Barcode" t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height::4rem;"/>
+                                <div t-field="product.barcode" t-options="{'widget': 'barcode', 'symbology': 'auto', 'width': 600, 'height': 150, 'img_style': 'width:100%;height::4rem;'}"/>
                                 <span t-field="product.barcode"/>
                             </t>
                             <t t-else=""><span class="text-muted">No barcode available</span></t>
@@ -53,9 +51,7 @@
                     <tr>
                         <td class="text-center align-middle" style="height: 6rem;">
                             <t t-if="product.barcode">
-                                <img alt="Barcode" t-if="len(product.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height:4rem;"/>
-                                <img alt="Barcode" t-elif="len(product.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN8', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height:4rem;"/>
-                                <img alt="Barcode" t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', quote_plus(product.barcode or ''), 600, 150)" style="width:100%;height:4rem"/>
+                                <div t-field="product.barcode" t-options="{'widget': 'barcode', 'symbology': 'auto', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:4rem'}"/>
                                 <span t-field="product.barcode"/>
                             </t>
                             <t t-else=""><span class="text-muted">No barcode available</span></t>
diff --git a/addons/stock/report/picking_templates.xml b/addons/stock/report/picking_templates.xml
index 7b41cd08d96..feed1389fb1 100644
--- a/addons/stock/report/picking_templates.xml
+++ b/addons/stock/report/picking_templates.xml
@@ -63,7 +63,7 @@
                                                     <tr>
                                                         <td class="text-center align-middle">
                                                             <t t-if="move_line.lot_name or move_line.lot_id">
-                                                                <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', move_line.lot_name, 600, 150)" style="width:100%;height:4rem" alt="Barcode"/>
+                                                                <div t-field="move_line.lot_name" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:4rem'}"/>
                                                                 <span t-esc="move_line.lot_name or move_line.lot_id.name"/>
                                                             </t>
                                                             <t t-else="">
@@ -76,8 +76,8 @@
                                                     <tr>
                                                         <td class="text-center align-middle" style="height: 6rem;">
                                                             <t t-if="move_line.product_id.barcode">
-                                                                    <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', move_line.product_id.barcode, 600, 150)" style="width:100%;height:4rem" alt="Barcode"/>
-                                                                    <span t-esc="move_line.product_id.barcode"/>
+                                                                <div t-field="move_line.product_id.barcode" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:4rem'}"/>
+                                                                <span t-esc="move_line.product_id.barcode"/>
                                                             </t>
                                                             <t t-else="">
                                                                 <span class="text-muted">No barcode available</span>
diff --git a/addons/stock/report/report_location_barcode.xml b/addons/stock/report/report_location_barcode.xml
index 6cc5ef6c986..250f6045d5f 100644
--- a/addons/stock/report/report_location_barcode.xml
+++ b/addons/stock/report/report_location_barcode.xml
@@ -14,7 +14,7 @@
                 <t t-foreach="page_row" t-as="o">
                   <td>
                     <div style="text-align: center; font-size: 2em"><span t-field="o.name"/></div>
-                    <img t-if="o.barcode" class="barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;humanreadable=1' % ('Code128', o.barcode, 600, 150)" alt="Barcode"/>
+                    <div t-if="o.barcode" t-field="o.barcode" t-options="{'widget': 'barcode', 'humanreadable': 1, 'width': 600, 'height': 150}"/>
                   </td>
                 </t>
               </tr>
diff --git a/addons/stock/report/report_lot_barcode.xml b/addons/stock/report/report_lot_barcode.xml
index 722c11abd6c..5333599c511 100644
--- a/addons/stock/report/report_lot_barcode.xml
+++ b/addons/stock/report/report_lot_barcode.xml
@@ -23,7 +23,7 @@
                                 </tr>
                                 <tr>
                                     <td style="text-align: center; vertical-align: middle;" class="col-5">
-                                        <img t-if="o.name" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 150)" style="width:100%;height:20%;"/>
+                                        <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:100%;height:20%;'}"/>
                                     </td>
                                 </tr>
                             </table>
diff --git a/addons/stock/report/report_package_barcode.xml b/addons/stock/report/report_package_barcode.xml
index 6e0f9f55952..a9845e09438 100644
--- a/addons/stock/report/report_package_barcode.xml
+++ b/addons/stock/report/report_package_barcode.xml
@@ -13,9 +13,8 @@
                               <h1 t-field="o.name" class="mt0 float-left"/>
                             </th>
                             <th name="td_pk_barcode" style="text-align: center">
-                                <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" alt="Barcode"
-                                  style="width:300px;height:50px"/>
-                                  <p t-field="o.name"/>
+                                <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:300px;height:50px;'}"/>
+                                <p t-field="o.name"/>
                             </th>
                         </tr>
                     </table>
@@ -66,7 +65,7 @@
                     <div class="oe_structure"/>
                     <div class="row">
                         <div class="col-12 text-center">
-                            <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:600px;height:100px" alt="Barcode"/>
+                            <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:600px;height:100px;'}"/>
                             <p t-field="o.name"  style="font-size:20px;"></p>
                         </div>
                     </div>
diff --git a/addons/stock/report/report_stockpicking_operations.xml b/addons/stock/report/report_stockpicking_operations.xml
index dacc8ff808d..d8b75a89d67 100644
--- a/addons/stock/report/report_stockpicking_operations.xml
+++ b/addons/stock/report/report_stockpicking_operations.xml
@@ -9,7 +9,7 @@
                         <div class="page">
                             <div class="row justify-content-end mb16">
                                 <div class="col-4" name="right_box">
-                                    <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', o.name, 600, 100)" style="width:300px;height:50px;" alt="Barcode"/>
+                                    <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 100, 'img_style': 'width:300px;height:50px;'}"/>
                                 </div>
                             </div>
                             <div class="row">
@@ -113,15 +113,13 @@
                                                     </div>
                                                 </td>
                                                 <td class=" text-center h6" t-if="has_serial_number">
-                                                    <img t-if="has_serial_number and (ml.lot_id or ml.lot_name)" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;humanreadable=1' % ('Code128', ml.lot_id.name or ml.lot_name, 400, 100)" style="width:100%;height:35px;" alt="Barcode"/>
+                                                    <div t-if="has_serial_number and (ml.lot_id or ml.lot_name)" t-field="ml.lot_id.name or ml.lot_name" t-options="{'widget': 'barcode', 'humanreadable': 1, 'width': 400, 'height': 100, 'img_style': 'width:100%;height:35px;'}"/>
 
                                                 </td>
                                                 <td class="text-center" t-if="has_barcode">
                                                     <t t-if="product_barcode != move.product_id.barcode">
                                                         <span t-if="move.product_id and move.product_id.barcode">
-                                                            <img t-if="len(move.product_id.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;quiet=%s' % ('EAN13', move.product_id.barcode, 400, 100, 0)" style="height:35px" alt="Barcode"/>
-                                                            <img t-elif="len(move.product_id.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;quiet=%s' % ('EAN8', move.product_id.barcode, 400, 100, 0)" style="height:35px" alt="Barcode"/>
-                                                            <img t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;quiet=%s' % ('Code128', move.product_id.barcode, 400, 100, 0)" style="height:35px" alt="Barcode"/>
+                                                            <div t-field="move.product_id.barcode" t-options="{'widget': 'barcode', 'symbology': 'auto', 'width': 400, 'height': 100, 'quiet': 0, 'img_style': 'height:35px;'}"/>
 
                                                         </span>
                                                         <t t-set="product_barcode" t-value="move.product_id.barcode"/>
@@ -144,7 +142,7 @@
                                     <tr t-foreach="o.package_level_ids.sorted(key=lambda p: p.package_id.name)" t-as="package">
                                         <t t-set="package" t-value="package.with_context(picking_id=o.id)" />
                                         <td name="td_pk_barcode">
-                                            <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;humanreadable=1' % ('Code128', package.package_id.name, 600, 100)" style="width:300px;height:50px; margin-left: -50px;" alt="Barcode"/><br/>
+                                            <div t-field="package.package_id.name" t-options="{'widget': 'barcode', 'humanreadable': 1, 'width': 600, 'height': 100, 'img_style': 'width:300px;height:50px;margin-left: -50px;'}"/><br/>
                                         </td>
                                         <td t-if="o.picking_type_id.code != 'incoming'" groups="stock.group_stock_multi_locations">
                                             <span t-field="package.location_id"/>
diff --git a/addons/stock_picking_batch/report/report_picking_batch.xml b/addons/stock_picking_batch/report/report_picking_batch.xml
index 5e4415daefd..343ea888bd6 100644
--- a/addons/stock_picking_batch/report/report_picking_batch.xml
+++ b/addons/stock_picking_batch/report/report_picking_batch.xml
@@ -14,7 +14,7 @@
                             <div class="d-flex">
                                 <div><h3>Summary: <span t-field="o.name"/></h3></div>
                                 <div class="mr-auto">
-                                    <img alt="Barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', quote_plus(o.name or ''), 600, 150)" style="width:300px;height:50px"/>
+                                    <div t-field="o.name" t-options="{'widget': 'barcode', 'width': 600, 'height': 150, 'img_style': 'width:300px;height:50px;'}"/>
                                 </div>
                             </div>
                             <div t-if="o.user_id">
@@ -36,7 +36,7 @@
                                             <span t-field="pick.name"/>
                                         </td>
                                         <td>
-                                            <img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;quiet=%s' % ('Code128', pick.name, 400, 100, 0)" style="width:200px;height:50px" alt="Barcode"/>
+                                            <div t-field="pick.name" t-options="{'widget': 'barcode', 'quiet': 0, 'width': 400, 'height': 100, 'img_style': 'width:200px;height:50px;'}"/>
                                         </td>
                                         <td>
                                             <span t-field="pick.state"/>
@@ -101,14 +101,11 @@
                                                 <span t-esc="move_operation.mapped('picking_id').display_name"/>
                                             </td>
                                             <td t-if="has_serial_number" class="text-center h6" width="15%">
-                                                <img t-if="move_operation.lot_id or move_operation.lot_name" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s&amp;humanreadable=1' % ('Code128', move_operation.lot_id.name, 600, 100)" style="width:100%;height:35px;" alt="Barcode"/>
+                                                <div t-if="move_operation.lot_id or move_operation.lot_name" t-field="move_operation.lot_id.name" t-options="{'widget': 'barcode', 'humanreadable': 1, 'width': 600, 'height': 100, 'img_style': 'width:100%;height:35px;'}"/>
                                             </td>
                                             <td width="15%" class="text-center" t-if="has_barcode">
                                                 <span t-if="move_operation.product_id and move_operation.product_id.barcode">
-                                                    <img t-if="len(move_operation.product_id.barcode) == 13" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN13', move_operation.product_id.barcode, 600, 100)" style="width:100%;height:35px" alt="Barcode"/>
-                                                    <img t-elif="len(move_operation.product_id.barcode) == 8" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('EAN8', move_operation.product_id.barcode, 600, 100)" style="width:100%;height:35px" alt="Barcode"/>
-                                                    <img t-else="" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', move_operation.product_id.barcode, 600, 100)" style="width:100%;height:35px" alt="Barcode"/>
-
+                                                    <div t-field="move_operation.product_id.barcode" t-options="{'widget': 'barcode', 'symbology': 'auto', 'width': 600, 'height': 100, 'img_style': 'width:100%;height:35px;'}"/>
                                                 </span>
                                             </td>
                                             <td t-if="has_package" width="15%">