从 JavaScript 变量向 Jinja 模板 k 添加图像标签答案

【问题标题】：Add an image tag to Jinja Template k from a JavaScript variable从 JavaScript 变量向 Jinja 模板 k 添加图像标签
【发布时间】：2022-01-10 21:49:39
【问题描述】：

我正在尝试使用来自 Ajax 的变量为 Jinja 模板创建图像标签。

success: function (response) {
               var pythonResponse = "<ul id='userList'>";
               $.each(response,function(index,value) {
                    console.log(`path is ${value[0]}`)
                    pythonResponse += `<li onClick = 'selectUser("${value[1]}")'> ${value[1]}`
                    pythonResponse += `<img src={{ url_for('static', filename='${value[0])}')}}/></li>`
                    console.log(pythonResponse);
               });

有问题的行是这一行

pythonResponse += `<img src={{ url_for('static', filename='${value[0])}')}}/></li>`

当我运行此代码时，包含文件路径的变量 value[0] 被渲染为一堆 gobbledygook。这看起来像%24%7Bvalue%5B0%5D%29%7D/，但它应该看起来像这样/myfolder/myFile.jpg。我已经确认该变量确实等于它应该等于的值，如果我将文件路径硬编码到filename='' 中，那么它就可以工作。为什么这个变量会从这个/myfolder/myFile.jpg变成这个%24%7Bvalue%5B0%5D%29%7D/？

【问题讨论】：

标签： javascript python ajax flask url-for

【解决方案1】：

这里的应用顺序有些混乱。如果我正确理解首先应用了 javascript，那么下面的答案应该会有所帮助。

Jinja 正在转义您的变量以确保安全。通过在此处使用变量的方式使用变量，可能会在您的应用程序中引入安全问题。有关信息查找 XSS（跨站点脚本）攻击以获取更多信息。

如果您确定变量是安全的，那么 Jinja 允许您使用 safe 过滤器避免这种编码。

pythonResponse += `<img src={{ url_for('static', filename='${value[0])}') | safe}}/></li>`

https://jinja.palletsprojects.com/en/2.10.x/templates/#safe

【讨论】：

它仍然做同样的事情。我有
我认为 |安全不起作用，因为它在引号中
我试过let path = value[0]|safe;，但我收到一个错误提示Uncaught ReferenceError: safe is not defined
这就是我在这里的申请顺序难以遵循的意思。您在一行中混合了 Javascript 和 Jynja 模板。 safe 是 Jynja 提供的过滤器，这就是 JavaScript 抛出引用错误的原因。 {{ url_for('static', filename='${value[0])}')}} {{}} 对告诉 Jynja 解释该行，这使您可以访问 url_for 函数。 ${} 告诉 Javascript 解释内部值。所以第一个重要的问题是：Jynja 是先解释还是 Javascript？
javascript 先解释。 Ajax 向 python 发送信息，然后 python 响应，我试图从响应中制作这个图像标签，然后将它发送到 jinja。 javascript首先解释它