Problem printing ${el }, I want to print the content of the element but it prints $%7Bel%7D. It seems that the jinja detects the component ${el} as its 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)
The console.log prints : "/static/img-dota/$%7Bel%7D.png"...."
You are mixing server-side rendered templates with client side rendered templates. They cannot work together like this, because they have different runtime environment. We need to store the URL prefix in a JS variable and use only JS variables during the forEach loop that runs on the client side:
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)