I'm creating a website for my business, and I'm trying to load a list of images using the library Mustache, but the function render is rendering the template without the data. Here is the code:

the relevant part of gallery.hbs:

<div id="img-container" class="container-fluid">
        <div class="section-header">
            <h2 class="wow fadeInDown animated" style="color: #0a0a0a">Gallery</h2>
        </div>

        <script id="img-template" type="text/html">
                <div class="row no-gutter">
                <div class="col-lg-3 col-md-6 col-sm-6 work"> <a href="{{img_url}}" class="work-box"> <img src="{{img_url}}" alt="">
                    <div class="overlay">
                        <div class="overlay-caption">
                            <p><span class="icon icon-magnifying-glass"></span></p>
                        </div>
                    </div>
                    <!-- overlay -->
                </a> </div>
            </div>
        </script>
    </div>

And gallery.js:

let imgTemp = document.querySelector("#img-template").innerHTML;
let $imgContainer =  document.getElementById("img-container");

for(let i = 1; i <= 8; i++) {
    let url = `images/portfolio/0${i}.jpg`
    let jsonData = {img_url: url};

    let tmpHtml = Mustache.render(imgTemp, jsonData);
    console.log(tmpHtml); /* For debugging */

    $imgContainer.insertAdjacentHTML("beforeend", tmpHtml);
}

I have a list of images in the directory images/portfolio/ but cannot view them on my website. In addition, I logged the rendered tags for debugging, and I can view the tags, but without the img_url value:

<div class="row no-gutter">
<div class="col-lg-3 col-md-6 col-sm-6 work"> <a href="" class="work-box"> <img src="" alt="">
    <div class="overlay">
        <div class="overlay-caption">
            <p><span class="icon icon-magnifying-glass"></span></p>
        </div>
    </div>
<!-- overlay -->
</a> </div>
</div>

Is there something that I missed? Thanks for the help.