Html downloading dynamic picture

When I try to download the pokemon picture, the image was shown on the HTML, but I cant the pdf doest show the picture, it’s just blank. i wanted to download 1 pokemon as one pdf, but i got stuck with the pokemon picture, its work fine with text, but not with pictures

function generatePDF(name) {
    const element = document.getElementById("example-print");
    var clonedElement = element.cloneNode(true);
    var opt = {
        margin: 1,
        filename: name + '.pdf',
        jsPDF: { unit: 'in', format: 'A4', orientation: 'landscape' }
    };
    $(clonedElement).css("display", "block");
    html2pdf().from(clonedElement).set(opt).save();
    clonedElement.remove();
}

$(document).ready(function () {
    var table = $("#example2").DataTable({
        "responsive": true,
        "select": true,
        "ajax": {
            "url": "https://pokeapi.co/api/v2/pokemon",
            "type": "GET",
            "datatype": "json",
             dataSrc: "results"
        },
        'columnDefs': [
            {
                "data": "name",
                "targets": 0,
                "orderable": false,
                "className": 'select-checkbox',
                'checkboxes': {
                    'selectRow': true
                }
            },
        ],
        'select': {
            'style': 'multi'
        },
        "columns": [
            {
                "defaultContent": ''
            },
            {
                "data": null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": "name"
            },
            {
                "data": "url"
            }
        ]
    });

    $("#check").on("click", function () {
        var download = []
        var rows_selected = table.column(0).checkboxes.selected();

        $.each(rows_selected, function (index, rowId) {
            // Create a hidden element 
            download.push(rowId)
        });

        for (var i = 0; i < download.length; i++) {
            $.ajax({
                url: "https://pokeapi.co/api/v2/pokemon/" + (i+1),
                type: "Get",
                success: function (result) {
                    console.log(result)

                    $("#harga").html(result.base_experience);
                    $("#img1").attr("src", result.sprites.back_default);
                    $("#img2").attr("src", result.sprites.back_shiny);
                    $("#img3").attr("src", result.sprites.front_default);
                    $("#img4").attr("src", result.sprites.front_shiny);
                    generatePDF(result.name);
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }
    })
});

<div class=" container-fluid m-2 ">
    <div class="card">

        <div class="card-head">
            <button type="button" class="btn btn-primary m-2" id="check"> Check </button>
        </div>

        <div class="card-body">
            <form id="frm-example">
                <table id="example2" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>No</th>
                            <th>Name</th>
                            <th>url</th>
                        </tr>
                    </thead>
                </table>
            </form>
        </div>
    </div>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img1" />
 </div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img2"/>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img3"/>
</div>
<div class="col col-lg-6 col-sm-6 col-xl-6 col-md-6 building-img mt-2">
<img src="" class="img-responsive fit-image" id="img4"/>
</div>

here at the IMG, I put src on empty first, so I can replace it with jquery latter on. its work but it doesn’t show on the pdf