Problem printing ${el }, I want to print the content of the element but it prints $%7Bel%7D

Question

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

Answer 1

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)