How to add QR code image in Odoo's POS receipt

I'm trying to add a QR image to the POS's receipt. The code I used in a normal invoice that worked was the following one:

<img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s'%('QR', o.qr_code_string, 150, 150)"/>

For the receipt, I exported for printing my string as receipt.qr_string and added the following line to the receipt's inheriting XML file:

<img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s'%('QR', receipt.qr_string, 150, 150)"/>

But the image appear like a broken link. How do I achieve this?

I don't know why it is not working for POS receipts but let me tell you that POS is the system that can be run without connection to the server. Everything it executes should always using js i mean always to client side. So, my solution is to use QRrcode.js library as it is easy avaialable here.

Add this library file to the module on path /<your_module/static/src/lib/ folder and also to your pos backend like below and that file needs to added in the manifest as well under the "data" file list.

<odoo>
    <data>
        <template id="assets" inherit_id="point_of_sale.assets">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/<module_name>/static/src/lib/qrcode.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

Take care of path properly.

Then you can use that library in any POS Receipt Qweb like below to print QRcode.

<div t-attf-id="#{receipt.qr_string}"></div>
    <script type="text/javascript">
        var lot_name = "<t t-esc="receipt.qr_string"/>";
        var qrcode = new QRCode(receipt.qr_string , {
            text: "http://jindo.dev.naver.com/collie",
            width: 100,
            height: 100,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        qrcode.makeCode(receipt.qr_string);
    </script>