Estoy creando un sitio web para mi negocio y estoy tratando de cargar una lista de imágenes usando la biblioteca Mustache , pero la función render la plantilla sin los datos. Aquí está el código:

la parte relevante de 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>

Y 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); }

Tengo una lista de imágenes en el directorio images/portfolio/ pero no puedo verlas en mi sitio web. Además, registré las etiquetas renderizadas para la depuración y puedo ver las etiquetas, pero sin el valor img_url :

 <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>

¿Hay algo que me perdí? Gracias por la ayuda.