打印 ${el} 时出现问题，我想打印元素的内容，但打印出来的是 $%7Bel%7D

Question

打印 ${el } 时出现问题，我想打印元素的内容，但打印的是 $%7Bel%7D。 jinja 似乎将组件 ${el} 检测为其变量。

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)

console.log 打印："/static/img-dota/$%7Bel%7D.png"..."

Answer 1

您将 server-side 呈现的模板与客户端呈现的模板混合在一起。他们不能像这样一起工作，因为他们有不同的运行环境。我们需要将 URL 前缀存储在一个 JS 变量中，并在客户端运行的 forEach 循环中仅使用 JS 变量：

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)

打印 ${el} 时出现问题，我想打印元素的内容，但打印出来的是 $%7Bel%7D

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

javascript

python

jinja2

flask