I wanna create an attendance app using QRCode.

This inspirete by Odoo Attendance on Kiosk Mode, there employees can do attendance by scan their badge or identify manually by input their PIN.

Base on that, I wanna to create similiary, but the employess record their attendance by scan the QRCode that showing on kiosk mode using their phone. But this just going a step.

The problem that I facing is the QRCode image doesnt showing correctly, like the bellow screenshot:

Here is the code behind the screen above:

xml version="1.0" encoding="utf-8" ?>
<template xml:space="preserve">
    <t t-name="AqurAttendanceQRCodeKioskMode">
        <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
            <span class="o_hr_attendance_kiosk_backdrop"/>
          <div class="o_hr_attendance_clock text-center"/>
          <div class="o_hr_attendance_kiosk_mode o_barcode_main">
            <h1>
              Absensi QR Code
              
              <span t-esc="widget.qrcode_secret"/>
            h1>
            
            <img t-att-src="'/report/barcode/?type=%s&value=%s&width=%s&height=%s'%('QR', 'test text', 200, 200)"/>
        div>
        div>
    t>
template>

The point of the QR code code is on the:

<img t-att-src="'/report/barcode/?type=%s&value=%s&width=%s&height=%s'%('QR', 'test text', 200, 200)"/>

I also showing the full code in this short of video:
https://youtu.be/pZQu0rWObi4

I don't know, why the image contain the QRCode doesnt showing correctly.

So my question is: How to render/showing barcode or qr code image on Qweb Template?
The anwser, source or tutorial how to do that will be very appreciate?

Thanks,

Tri Nanda