[英]How to Display Image in Flask after a button is pressed
I am new to flask and web development.我是 flask 和 web 开发的新手。 I want to display an image on a local web server after I press a button on the webpage.
按下网页上的按钮后,我想在本地 web 服务器上显示图像。 I am using Flask.Ive been trying to figure this out for a while and havent been able too so any help would be incredible.
我正在使用 Flask。我一直在尝试解决这个问题,但也未能解决,所以任何帮助都会令人难以置信。 FLASK CODE:
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 CODE: 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>
TLDR; TLDR;
I wrote a minimal example on displaying images on button click using Flask
and Ajax
.我使用
Flask
和Ajax
编写了一个关于在按钮单击时显示图像的最小示例。
In essence, I just returned the URL of the image to the HTML page and set the src
attribute of <img>
tag with the returned URL.本质上,我只是将图像的 URL 返回到 HTML 页面,并使用返回的 URL 设置
<img>
标签的src
属性。
app.py:应用程序.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: 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>
You can modify this code as you wish.您可以根据需要修改此代码。
Note: The a.html file should be in templates
folder and the a.jpg file should be in the static
folder.注意: a.html 文件应该在
templates
文件夹中,a.jpg 文件应该在static
文件夹中。
Hope this helps.希望这可以帮助。 Good luck.
祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.