Ссылка на изображение веб-сервера на Pi для разных URL

#python #html #css #raspberry-pi

#python #HTML #css #raspberry-pi

Вопрос:

Я создаю веб-сервер на raspberry pi model 3 b для управления вводом / выводом pin-кода через веб-сайт. Я использую python / flask в качестве серверной части.

Веб-сайт выглядит хорошо, когда я перехожу на IP-адрес 192.168.147.246.

Однако, как только я нажимаю кнопку для открытия / закрытия. Логотип исчезает, потому что URL-это больше не просто IP-адрес 192.168.147.246, теперь это 192.168.147.246/ pinnumber / command (т.е. 192.168.147.246 / 4 / open).

pinnumber = pin-код, который был подключен comand = открыть / закрыть

Вопрос в том, «как мне заставить изображение отображаться, а стиль сохраняться, даже если 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>	  

Ответ №1:

Для любого места, куда вы вставляете МЕДИА из статической папки, просто добавьте косую черту перед статическим, чтобы браузер знал, что нужно перейти по URL-адресу.

Например: /static/logo.png /static / style.css