按下按钮后如何在 Flask 中显示图像答案

【问题标题】：How to Display Image in Flask after a button is pressed按下按钮后如何在 Flask 中显示图像
【发布时间】：2019-11-18 22:44:04
【问题描述】：

我是烧瓶和网络开发的新手。按下网页上的按钮后，我想在本地 Web 服务器上显示图像。我正在使用 Flask。我一直在尝试解决这个问题，但也无法解决，所以任何帮助都会令人难以置信。烧瓶代码：

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


@app.route('/read_ph', methods=["GET"])
def ph_plot():
    if request.method == "GET":
        all_plots.ph_plot()
        return render_template('live_stream.html')


@app.route("/read_temp", methods=["GET"])
def temp_plot():
    if request.method == "GET":
        all_plots.temperature_plot()
        return render_template('live_stream.html')


@app.route('/read_distance', methods=["GET"])
def distance_plot():
    if request.method == "GET":
        all_plots.distance_plot()
        return render_template('live_stream.html')

HTML 代码：

    <h1>Data Monitoring Station</h1>

      <form method="GET" 
        <a href="read_temp"><button type="button">Temperature Graph</button></a>
        <a href="read_ph"><button type="button">PH Graph</button></a>
        <a href="read_distance"><button type="button">Distance Graph</button></a>
      </form>

    <h3><img src="{{ url_for('static', filename='ph_plot.png') }}" width="30%">$
    <h3><img src="{{ url_for('static', filename='temperature_plot.png') }}" width="30%">$
    <h3><img src="{{ url_for('static', filename='distance_plot.png') }}" width="30%">$




  </body>
</html>

【问题讨论】：

标签： python html flask

【解决方案1】：

TLDR;

我使用Flask 和Ajax 编写了一个关于在单击按钮时显示图像的最小示例。

本质上，我只是将图片的 URL 返回到 HTML 页面，并将返回的 URL 设置为 <img> 标签的 src 属性。

app.py：

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('a.html')

@app.route("/getimage")
def get_img():
    return "a.jpg"


if __name__ == '__main__':
    app.run()

a.html:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
   <body>
     <button type='button' id ='retrieve'>Submit</button>
     <img src="" id="myimg" />
   </body>
  <script>
    $(document).ready(function() {
       $('#retrieve').click(function(){
           $.ajax({
           url: "{{ url_for ('get_img') }}",
           type: "GET",
           success: function(response) {
               $("#myimg").attr('src', '/static/' + response);
          },
          error: function(xhr) {
            //Do Something to handle error
         }
         });
       });
    });
  </script>
</html>

您可以根据需要修改此代码。

注意：a.html 文件应在templates 文件夹中，a.jpg 文件应在static 文件夹中。

希望这会有所帮助。祝你好运。

【讨论】：

感谢您的回复！脚本标记是否表示您正在运行 Ajax 函数或代码？在“$”之后是否意味着您正在编写 Ajax 代码。我仍然有点困惑，有没有办法在烧瓶中使用 python？另外，"(document).ready(function()" 有什么作用？谢谢！
我最终像这样“解决”了它：FLASK CODE @app.route('/read_distance', methods=["GET"]) def distance_plot(): if request.method == " GET": all_plots.distance_plot() imgname = url_for('static', filename='distance_plot.png') return render_template('live_stream.html', imgname=imgname)
并且在我的 html 中有 {{ imgname }}。现在，如果我再次按下按钮，我正试图让图表消失。感谢您的帮助！
$ 是 jquery 语法。我以为你会熟悉它。
没有。上面的示例是独立的并且运行良好。