我正在尝试通过标签将变量插入 url

Question

这里完全是新手。我非常感谢任何支持。

当我从头开始构建 url 并使用 .innerHTML 将其（构建的 url）插入文件名时，我收到 404 错误
但是，当我手动复制并通过连接的 url 结果（来自 source/inspect 浏览器页面）回到我的代码时，它会运行吗？？

我用来插入 url

的 HTML 元素

<div id="url_string">
</div>

我要插入的文件 -

'a_pic.jpg'

方法 A（硬编码）- 这会运行。虽然不是我需要的

<div id="url_string">
     <a  href="{{url_for('download_file', filename='a_pic.jpg')}}">
         <i class="material-icons" style="font-size:36px">attachment</i>
     </a>
</div>

方法 B（构建 url）- 我在这里遇到错误。在这里，我从服务器接收 url 并将其传递给 javascript data.filename。从 console.log，我的 url 变量 (y) 正在通过。 link 回形针文件符号出现在收件人页面上（这向我表明连接的字符串变量已按计划在听到套接字 ping 时插入聊天页面）。

socket.on("sent_file", data => {
var x = "<a href=\"{{url_for(\'download_file\', filename=\'"
var y = `${data.filename}`
var z = "\')}}\"><i class=\"material-icons\" style=\"font-size:36px\">attachment</i></a>"
var entire_url_var = x + y + z
document.querySelector("#url_string").innerHTML = entire_url_var

console.log(y)
console.log(entire_url_var)
})

这是上述代码的拼接结果（从浏览器复制）

<a href="{{url_for('download_file', filename='a_pic.jpg')}}"><i class="material-icons" style="font-size:36px">attachment</i></a>

据我所知，它与方法 A 中的硬编码相同。但是，单击出现在运行上的附件 link，我收到 404 错误（在服务器上找不到请求的 URL。）

到目前为止我做了什么。我尝试了很多变化。在 a link 而不是周围的 div 中有 id （并相应地调整连接的字符串）等等。我怀疑我明显遗漏了什么。
我在这上面花了很多时间，并阅读了很多其他类似的问题，但还没有设法解决它（其他问题似乎与语法相关，但我不确定我的是否是）。感谢您的支持并尊重您的时间。谢谢。

Answer 1

虽然您在两种情况下生成相同的 link 是正确的，但区别在于谁在解释 link。

在您的方法 A 中，处理您的 HTML 的是来自 Flask 的模板引擎 Jinja2。所以你给它：

<a href="{{url_for('download_file', filename='a_pic.jpg')}}"><i class="material-icons" style="font-size:36px">attachment</i></a>

Jinja2 会注意到 {{ ... }} 之间有 Python 代码。所以它会执行这段代码并用结果替换它。因此，当这个 HTML 代码片段到达浏览器时，您将看到类似这样的内容：

<a  href="/downloads/a_pic.jpg"><i class="material-icons" style="font-size:36px">attachment</i></a>

（请注意，为您的图像生成的 href 可能有所不同，您必须查看方法 A 的 HTML 来源，以确切了解此 URL 的外观）。

在您的方法 B 中，您在浏览器中执行所有操作，因此您的 Python 服务器不可用。在这里你必须严格使用 JavaScript 渲染 URL，你不能依赖 Flask 的辅助函数，例如 url_for().

因此您需要按照在浏览器中显示的方式生成 href。它会是这样的：

var x = "<a href=\"/downloads/"
var y = `${data.filename}`
var z = "\"><i class=\"material-icons\" style=\"font-size:36px\">attachment</i></a>"

我正在尝试通过标签将变量插入 url

I am trying to insert a variable via tags into a url

python

jinja2

flask

flask-socketio