Bild auf Website anzeigen lassen

International Deutsch
1

Hallo,
ich habe eine Website programmiert die die Messwerte des DHT11 anzeigt.
Ich möchte diese aber noch schöner desigenen. Ich wollte jetzt ein Hintergrunbild einfügen bin daran aber gescheitert. Ich habe dann ein wenig gegoogelt und diese Website gefunden.

Das habe ich dann alles gemacht und das hochladen von LittleFS hat auch geklappt. Das Testbeispiel wiederrum nicht. Dann habe ich es an meinem code getestet und es hat auch nicht geklappt. Was muss ich tun damit mein Bild auf diese Website kommt.


```cpp
#include "WiFi.h"
#include "WebServer.h"
#include "ESPmDNS.h"
#include "DHT.h"
#include "LittleFS.h"

const char* password = "43673422706482652559";
const char* ssid = "WLAN-727334";

#define DHTTYPE DHT11
DHT dht(1, DHTTYPE);

WebServer server(80);

void handle_root() {
  float humidity = dht.readHumidity();
  float temperature = dht.readTemperature(false);

  if (isnan(humidity) || isnan(temperature)) {
    server.send(200, "text/plain", "Fehler beim Lesen vom DHT-Sensor!");
    return;
  }

  String html = R"(
    <!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="refresh" content="10">
      <title>Temperatur_Luftfeuchtigkeit</title>
    </head>
    <body>
      <img src="rain-drops-1144448_1280.jpg">
      <h1></h1>
      <p>Die Temperatur im Raum ist )" + String(temperature) + R"( °C</p>
      <p>Die Luftfeuchtigkeit im Raum ist )" + String(humidity) + R"( %</p>
      <script>
        function fetchData() {
          fetch('/').then(response => response.text()).then(data => {
            const [temperature, humidity] = data.split(',');
            document.getElementById('temperature').textContent = temperature;
            document.getElementById('humidity').textContent = humidity;
          }).catch(error => console.error('Error fetching data:', error));
        }
        setInterval(fetchData, 5000);
        fetchData();
      </script>
    </body>
    </html>
  )";

  server.send(200, "text/html", html);
}


void setup() {
  Serial.begin(115200);
  dht.begin();

  Serial.println("connecting");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  if (!MDNS.begin("esp32")) {   
    Serial.println("Error setting up MDNS responder!");
    while(1) {
      delay(1000);
    }
  }

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("connected");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());

  server.on("/", handle_root);
  server.begin();
  Serial.println("server started");
  delay(1000);
}

void loop() {
  server.handleClient();
}




![Screenshot 2024-09-15 at 17-35-58 Temperatur_Luftfeuchtigkeit|499x254](upload://kXl5kWNcb0t5cLXLRlSTuPfw3Iu.png)
so sieht meine Website mit dem Code aus.

Danke im Voraus.

PS: bin noch nicht erfahren
2

Ich bin jetzt nicht der FS profi. Hast du denn die datei auch ins fs hochgeladen? Und die website muss ja auch wissen wo das bild liegt. Schau dir mal die seite fipsok.de an. Da wird alles erklärt. Auch wie du dann während dem Betrieb dateien hochladen kannst.

6

Moin @derunbakannteuser ,

damit ein Browser das JPG laden kann, muss der Server die Übertragung der Datei unterstützen und Zugriff auf das Filesystem haben.

Dazu muss LittleFS eingebunden und initialisiert sein sowie eine Funktion implementiert und registriert werden, welche die Bilddatei auf Anfrage an den Client sendet.

Wenn Du Dir diesen Beitrag anschaust, sollte es klar werden:

https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

Ein Beispiel für die erforderliche Funktion sieht so aus:

 server.on("/cloud", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/cloud.png", "image/png");
  });

wobei "/cloud" der Name der Datei ist, die im HTML als

<img src="cloud">

benannt ist.

Viel Erfolg!
ec2021