Javascript 将imgsrc传递到另一个HTML页面

我是web开发新手，我正在尝试构建一个web应用程序，前端使用HTML、CSS和JS，后端使用python和flask。我掌握了一些HTML、CSS和python的基本知识，但JS和Flask对我来说都是新手

无论如何，我正在尝试创建一个页面，您可以在其中浏览图像，一旦您单击其中一个，我想重定向到一个新页面，显示该图像以及一些信息。我想完成的事情非常相似

这应该用JS来完成，还是可以用烧瓶来完成？什么是“正确的”并且最好是简单的方法

这是我的代码，我目前的问题是我不知道如何发送img id。我只知道POST和GET via表单。如何根据服务器中的id获取图像

（图像存储在/static文件夹下） app.py：

从flask导入flask，呈现模板，请求，响应，重定向
导入操作系统
app=烧瓶（名称）
@应用程序路径（“/”）
def index（）：
返回渲染模板（'index.html'）
@app.route（'/image/'，方法=['GET'，'POST']）
def图像（id）：
#基于id获取图像？
返回渲染模板（'image.html'，id=id）
如果“名称”=“\uuuuuuuu主要”：
app.run（debug=True）

index.html：

{% extends 'base.html' %}


{% block content %}

<a href="/image/123">
    <img src="static/123.jpg" id="123" alt="" width="400" height="400">
</a>


{% endblock %}

{%extends'base.html%}
{%block content%}
{%endblock%}

image.html：

{% extends 'base.html' %}


{% block content %}

<img src="{{ url_for('static',filename='{{ id }}') }}" id="123" alt="" width="400" height="400">

{% endblock %}

{%extends'base.html%}
{%block content%}
{%endblock%}

对于每个图像，创建一个ID，或者只使用现有的ID（如果可用）。如果图像有ID或名称，比如说

xys

，当用户单击图像时，重定向用户说

site.com/image/xys

，在flask应用程序中，当用户点击

/image/

时，为相应页面提供相关信息

来回答您的问题，我们需要了解更多，您是否使用flask来呈现这些页面，或者您只是将其用作API？就前端而言，如果需要调用API然后填充图像，则只需使用javascript，只需使用带有href属性的“a”标记重定向到另一个页面即可。同样，根据您的工作方式，它将改变您编写代码的方式。您的问题涉及前端解决方案和后端解决方案。您发布的网站正在使用一个后端，其中包含加载首页时加载的图像数据库。单击图像时，很可能会查询数据库或其他形式的API，然后加载新页面。是的，你可以使用FLASK或Node.js，用前端和后端系统建立一个网站。它使用URL查询参数加载带有指定图像的页面。有多种方法可以做到这一点。“正确”的方法是在每张图片的链接中添加一个

id

参数：

。当然不是人工操作；呈现gallery视图的flask代码使用图像的文件名或数据库id自动执行此操作。接下来，在“/image”路径中，flask读取

id

参数，并使用该参数选择要显示的正确图像。正确的方法是熟悉HTTP GET和POST参数，以及它们在链接和表单中的使用方式。尽量不要使用任何JavaScript。一旦您知道如何处理路由、参数和POST请求主体，即web开发的绝对基础知识，类似问题的答案将变得显而易见。感谢您的快速响应@如果你所说的渲染是指使用渲染模板的概念，是的，这对我来说是新的，但我会尝试一下。目前，图像位于env的静态文件夹中。我很抱歉，如果我不能提供最好的信息，但叶，我是新的和困惑。对于将来的图像位置，我们已经讨论过DB，但很可能会将它们保存在web服务器的某个文件夹结构中。

{% extends 'base.html' %}


{% block content %}

<img src="{{ url_for('static',filename='{{ id }}') }}" id="123" alt="" width="400" height="400">

{% endblock %}