网络服务器图标未显示ESP8266；

编程问答 2022-05-31

问题描述

我正在尝试构建一个从 HC-SRO4（通用超声波距离传感器）流式传输数据的网络服务器。使用 ESP8266。它工作正常，但我不知道为什么网站图标没有显示在服务器上。

当我检查网络服务器时，我有线路

<pre>

     <link rel="icon" type="image/x-icon" href='"/favicon.ico">

</pre

在该部分但它没有显示（我尝试了不同的浏览器并清除了现金） 我是 HTML 新手，正在使用 ESP，所以我确定我做错了什么，任何帮助将不胜感激。

ESP 代码：

//Start of program
//Liraries
#include <ESP8266WiFi.h>
//ssid info
const char* ssid     = "xxxxx";
const char* password = "xxxx";

WiFiServer server(80);
String header; // Current time
unsigned long currentTime = millis(); // PrevIoUs time
unsigned long prevIoUsTime = 0; 
const long timeoutTime = 2000;
//setup HC-SRO4 sensor
int EchoPin = D2;
int TrigPin = D3;
long duration;
int distance;

void setup() {
  Serial.begin(115200);   // Connect to Wi-Fi network with SSID and password
  
  //defining HC-SR04 Pins
  pinMode(EchoPin,INPUT);
  pinMode(TrigPin,OUTPUT);
  delay (1000);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid,password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Starting WebServer
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             
    Serial.println("New Client.");         
    String currentLine = "";                
    currentTime = millis();
    prevIoUsTime = currentTime;
    while (client.connected() && currentTime - prevIoUsTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             
        char c = client.read();             
        Serial.write(c);                   
        header += c;
        if (c == '\n') {                    
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: 'image/ico'");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // display the HTML web page
            client.println("<link rel='icon'" );
            client.print("type='image/x-icon'");
            client.print("href='/favicon.ico'>");
            client.println("<body style=""background-color:lightgray;"">");
            client.println("<!DOCTYPE html><html>");
            client.println("<p><span style=""\"""color: rgb(41,105,176);""\"""><strong><span style=""\"""font-family: Impact,Charcoal,sans-serif; font-size: 36px;""\""">ESP8266 WebServer</span></strong></span></p>");
            client.println("<p><span style=""\"""color: rgb(41,sans-serif; font-size: 36px;""\">");  
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            client.print(distance);
            client.print("&nbsp;CM");
            client.print("</span></strong></span></p>");
            client.println("</body></html>");
            client.println("<Meta http-equiv='refresh' content='3'>"); //refresh page every 3 seconds
            client.println("</body></html>");
            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {  
          currentLine += c; 
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
  //HC-SR04 programming 
  digitalWrite(TrigPin,LOW);
  delayMicroseconds(2);
  // Sets the trigPin HIGH (ACTIVE) for 10 microseconds
  digitalWrite(TrigPin,HIGH);
  delayMicroseconds(10);
  digitalWrite(TrigPin,LOW);
  // Reads the echoPin,returns the sound wave travel time in microseconds
  duration = pulseIn(EchoPin,HIGH);
  // Calculating the distance
  distance = duration * 0.034 / 2;
  float data = distance;
  Serial.print("distance: ");
  Serial.print(distance);
  Serial.println(" cm");
}
//end of program

解决方法

嗨，欢迎来到 Stackoverflow！

你把文件 favicon.ico 到底放在哪里了？浏览器无法找到它，因为 ESP 并不像大多数网络服务器那样拥有文件系统。

相反，您可以base64 编码您的图标并将其直接存储在 HTML 标记中，如下所示：

<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==" />

您可以转换您的 ico 文件 here。

确保将 HTML 正确转义为 c 字符串。如果将字符串括在双引号中，则必须在文本中使用 \" 才能实际打印双引号。

对于收藏夹图标，我建议使用多个 client.print 命令将您的实际 HTML 分成几行，因为我过去在 ESP8266 上遇到过长行的问题；)

c++esp8266esp8266faviconfaviconhtmlwebserverwebserver