我尝试在javascript中添加一张图片到一张卡片上，看起来像这样：

console.log(account_name);
document.getElementById("list_of_datasets").innerHTML += `
                <div class="col-lg-4 d-flex align-items-stretch">
                    <!--CARD BEGIN-->
                    <div class="card w-100" style="width 18rem" >
                        <img src="{{url_for('static', filename='#UserData/' + account_name + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

                        <div class="card-body">
                            <h1 class="card-title">${account_name}</h1>
                            <h2 class="card-title">data_set title</h2>
                            <h3 class="card-title">go to page</h3>
                            <p class="card-text">probably going to be a description</p>
                            <button class="btn btn-outline-danger btn-lg">download</button>
                        </div>
                    </div>
                    <!--CARD END-->
                </div>`

我得到的错误是“jinja2.exceptions.UndefinedError：“account_name”是未定义的”，但是谷歌日志显示它确实存在，我怀疑这与flask希望它的图像输入方式有关。
当我硬编码帐户名称时，它工作正常。
当我在html正文而不是JS脚本中使用下面的代码时，它工作得很好：

<img src="{{url_for('static', filename='#UserData/' + account_name + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

但是我不能根据用户名动态分配它，有人能帮我弄清楚如何做到这一点吗？
编辑：这也不起作用：

<img src="{{url_for('static', filename='#UserData/' + ${account_name} + '/profile/profile_pic.jpg')}}\"  width='40' height='40' />

谢谢你