我正在树莓派 3 b+ 型上构建网络服务器，以通过网站控制输入/输出。我正在使用 python/flask 作为后端。
访问IP地址192.168.147.246时，网站看起来不错。
但是，一旦我点击一个按钮来打开/关闭。 Logo 消失了，因为 url 不再只是 IP 地址 192.168.147.246，现在是 192.168.147.246/pinnumber/command(即 192.168.147.246/4/open)。
pinnumber = 连接的引脚 命令=打开/关闭
问题是，“即使 url 根据用户操作发生变化，我如何让图像显示并保留样式？”
这里是使用的python代码:
import RPi.GPIO as GPIO
from flask import Flask, render_template, request
app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
# Create a dictionary called pins to store the pin number, name, and pin state:
pins = {
4 : {'name' : 'Airport Box 1', 'state' : GPIO.LOW},
24 : {'name' : 'Airport Box 2', 'state' : GPIO.LOW}
}
# Set each pin as an output and make it low:
for pin in pins:
GPIO.setup(pin, GPIO.OUT)
GPIO.output(pin, GPIO.HIGH)
@app.route("/")
def main():
# For each pin, read the pin state and store it in the pins dictionary:
for pin in pins:
pins[pin]['state'] = GPIO.input(pin)
# Put the pin dictionary into the template data dictionary:
templateData = {
'pins' : pins
}
# Pass the template data into the template main.html and return it to the user
return render_template('index.html', **templateData)
# The function below is executed when someone requests a URL with the pin number and action in it:
@app.route("/<changePin>/<action>")
def action(changePin, action):
# Convert the pin from the URL into an integer:
changePin = int(changePin)
# Get the device name for the pin being changed:
deviceName = pins[changePin]['name']
# If the action part of the URL is "on," execute the code indented below:
if action == "close":
# Set the pin high:
GPIO.output(changePin, GPIO.HIGH)
# Save the status message to be passed into the template:
message = "Turned " + deviceName + " close"
if action == "open":
GPIO.output(changePin, GPIO.LOW)
message = "Turned " + deviceName + " open."
# For each pin, read the pin state and store it in the pins dictionary:
for pin in pins:
pins[pin]['state'] = GPIO.input(pin)
# Along with the pin dictionary, put the message into the template data dictionary:
templateData = {
'pins' : pins
}
return render_template('index.html', **templateData)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80, debug=True)这是html代码:
<!DOCTYPE html>
<head>
<title> {{Title}} </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="static/style.css/">
</head>
<body>
<h1> <img src="static/logo.png" alt="logo"> Name </h1>
<h3> Check in Area A </h3>
{% for pin in pins %}
<h3>{{ pins[pin].name }}
{% if pins[pin].state == true %}
is currently closed</h3>
<div class="row">
<div class="col-md-2">
<a href="/{{pin}}/open" class="btn btn-block btn-lg btn-default" role="button">Open Box</a>
</div>
</div>
{% else %}
is currently opened</h3>
<div class="row">
<div class="col-md-2">
<a href="/{{pin}}/close" id="closeBTN" class="btn btn-block btn-lg btn-primary" role="button">Close Box</a></div>
</div>
{% endif %}
{% endfor %}
<p> <strong> Email: xxxxx </strong> </p>
</body>
</html> 最佳答案
对于从 static 文件夹嵌入媒体的任何地方，只需在 static 之前添加一个斜杠，这样浏览器就会知道在 url 路径中上升。
喜欢:/static/logo.png /static/style.css
关于python - Pi 上不同 URL 的 Web 服务器图像链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55583408/