Problem printing ${el }, I want to print the content of the element but it prints ${el}-CodePudding

Problem printing ${el }, I want to print the content of the element but it prints ${el}. 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/${el}.png"...."

CodePudding user response：

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  src="${url_prefix}/${el}"></div>`
})
console.log(html)