CSS 当由 ESP8266 运行一个 ESPAsyncWebServer 服务时，样式被删除

Question

尝试将图像中的文本定位为与 w3schools 中的示例完全相同。它在 w3schools 的 my space 中运行良好。当我在浏览器中查看 css 时：

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

但是当完全相同的html+csscode在esp8266 nodeMCU上是运行时，定位失败。正如 Ben T 所说，缺少宽度样式。

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

css-class“中心”出现问题。

这是 esp8266 上的代码运行。 html 文件现在在同一个文件中。 css-定位也因温度字符串而失败。

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include "LittleFS.h"

const char* ssid     = "ESP8266-Access-Point";
const char* password = "123456789";

// hard coded current temperature & humidity
float t = 15.1;
float h = 55.5;

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="camper" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>)rawliteral";


// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

//background-image: url(\"camper\")

void setup(){
  Serial.begin(115200);
  
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  if(!LittleFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }

  File camper = LittleFS.open("/camper.png", "r");

  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

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

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(t).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(h).c_str());
  });

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

有人以前经历过这样的事情吗？提前感谢任何类型的提示 ;)

Answer 1

模板处理器用于：

request->send_P(200, "text/html", index_html, processor);

来自https://github.com/me-no-dev/ESPAsyncWebServer#template-processing

Placeholders are delimited with % symbols. Like this: %TEMPLATE_PLACEHOLDER%.

因此 index_html 字符串文字中的所有 % 个字符都需要转义。例如：

top: 50%%;
width: 100%%;

否则 ESPAsyncWebServer 模板处理会将 % 个字符之间的字符视为占位符。

即文本 %;\n width: 100% 被视为占位符。您的 processor() 函数仅替换 TEMPERATURE 和 HUMIDITY 占位符，任何其他占位符都将替换为空字符串。

这意味着这个 CSS:

top: 50%;
width: 100%;

替换为：

top: 50;

问题 https://github.com/me-no-dev/ESPAsyncWebServer/issues/644 中描述了这个一般问题。

CSS 当由 ESP8266 运行一个 ESPAsyncWebServer 服务时，样式被删除

CSS styles are removed when served by ESP8266 running an ESPAsyncWebServer

html

webserver

esp8266

CSS 当由 ESP8266 运行 一个 ESPAsyncWebServer 服务时，样式被删除

CSS styles are removed when served by ESP8266 running an ESPAsyncWebServer

html

webserver

esp8266

CSS 当由 ESP8266 运行一个 ESPAsyncWebServer 服务时，样式被删除