Problema al imprimir ${el }, quiero imprimir el contenido del elemento pero imprime $%7Bel%7D. Parece que el jinja detecta el componente ${el} como su variable.
const heroesJson = [{ "images": [ "Abaddon_icon.png", "Alchemist_icon.png", "Ancient_Apparition_icon.png", ] }] const divHeroes = document.querySelector('#heroes') let html = '' let arrayHeroe = heroesJson[0].images arrayHeroe.forEach((el)=>{ html+=`<div><img class='w-20' src="{{url_for('static', filename='img-dota/${el}')}}"></div>` }) console.log(html)El archivo console.log imprime: "/static/img-dota/$%7Bel%7D.png"...."
Está mezclando plantillas renderizadas del lado del servidor con plantillas renderizadas del lado del cliente. No pueden trabajar juntos de esta manera, porque tienen un entorno de tiempo de ejecución diferente. Necesitamos almacenar el prefijo de URL en una variable JS y usar solo variables JS durante el bucle forEach que se ejecuta en el lado del cliente:
const heroesJson = [{ "images": [ "Abaddon_icon.png", "Alchemist_icon.png", "Ancient_Apparition_icon.png", ] }] const divHeroes = document.querySelector('#heroes') const url_prefix = "{{ url_for('static', filename='img-dota') }}"; let html = '' let arrayHeroe = heroesJson[0].images arrayHeroe.forEach((el)=>{ html+=`<div><img class="w-20" src="${url_prefix}/${el}"></div>` }) console.log(html)