将 img src 传递给另一个 HTML 页面答案

【问题标题】：Passing img src to another HTML page将 img src 传递给另一个 HTML 页面
【发布时间】：2021-04-14 05:59:43
【问题描述】：

我是 Web 开发的新手，我正在尝试使用 HTML、CSS 和 JS 构建一个 Web 应用程序，前端使用 HTML、CSS 和 JS，后端使用烧瓶。我对 HTML、CSS 和 python 有了一些基本的了解，但是 JS 和 Flask 对我来说都是新的。

无论如何，我试图创建一个您浏览图像的页面，一旦您单击一个，我想重定向到一个显示该图像以及一些信息的新页面。我想要完成的和https://pixabay.com/sv/非常相似。

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

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

（图片存放在 /static 文件夹下） app.py：

from flask import Flask, render_template, request, Response, redirect
import os


app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')

@app.route('/image/<id>', methods=['GET', 'POST'])
def image(id):

    #fetch image based on id?
    return render_template('image.html', id=id)

if __name__=='__main__':
    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 %}

image.html:

{% extends 'base.html' %}


{% block content %}

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

{% endblock %}

【问题讨论】：

要回答您的问题，我们需要了解更多信息，您是使用flask 来呈现这些页面，还是只是将其用作API？前端方面，只有在需要调用 API 然后填充图像时才使用 javascript，您可以使用带有 href 属性的“a”标签简单地重定向到该其他页面。同样，根据您的工作方式，它会改变您编写代码的方式。
您的问题涉及前端解决方案和后端解决方案。您发布的网站正在使用带有图像数据库的后端，该数据库在加载首页时加载。单击图像时，很可能会查询数据库或其他某种形式的 API，然后加载新页面。所以是的，您可以使用 FLASK 或 Node.js 并使用前端和后端系统构建网站。它使用 URL 查询参数然后加载具有指定图像的页面。有多种方法可以解决这个问题。
“正确”的方式是在每张图片的链接中添加id参数：<a href="/image?id=abc">。当然不是手动的；呈现画廊视图的烧瓶代码使用图像的文件名或数据库 ID 自动执行此操作。接下来，在 "/image" 路由中，flask 读取 id 参数并使用它来选择要显示的正确图像。
正确的做法是熟悉 HTTP GET 和 POST 参数，以及它们在链接和表单中的使用方式。尽量不要使用 any JavaScript。一旦您知道如何处理路由、参数和 POST 请求主体，即 Web 开发的绝对基础知识，此类问题的答案就会变得显而易见。
感谢您的快速响应！ @dune184 如果渲染是指使用渲染模板概念，是的，这对我来说是新的，但我会试一试。目前，图像位于环境中的静态文件夹中。很抱歉，如果我无法提供有关这方面的最佳信息，但是你，我是新手，很困惑。对于未来的图像位置，我们已经讨论过一个数据库，但很可能会以某种文件夹结构将它们保存在网络服务器中。

标签： javascript python html flask

【解决方案1】：

为每张图片创建一个 ID，或者只使用现有的 ID（如果有）。如果图像具有 ID 或名称，例如 xys，则在单击图像时将用户重定向到说 site.com/image/xys，并在烧瓶应用程序中，当用户点击 /image/<ID> 时，提供包含相关信息的相应页面

【讨论】：