gpt4 book ai didi

python - Pi 上不同 URL 的 Web 服务器图像链接

转载 作者:行者123 更新时间:2023-11-28 00:08:06 25 4
gpt4 key购买 nike

我正在树莓派 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com