最近几天我一直在为此苦苦挣扎,所以我想我终于问了知识渊博的人。
目前我从 imgur 加载图像作为提交按钮的背景。这有效,我已在随附的草图文件中标记。我想在本地移动此操作,以便我使用更少的数据并且不必依赖 imgur 的响应。
将一些 jpeg 文件加载到 SPIFFS 。我已经使用 ESP8266WebServer 下的 FSBrowser 示例确认它们在 SPIFFS 上。当我尝试将图像设置为提交按钮的背景时,它没有出现;按钮背景将是白色或灰色,具体取决于我在代码中指定图像位置的方式。
我也试过只加载没有表格的图像无济于事。在 Safari 桌面浏览器上,它显示带有问号的蓝色方块。在 iPhone 上它不显示任何内容。
我不是网页编码员,但我不认为我的标头是问题所在,因为当我引用 imgur url 时它一切正常。我试过使用这个可以从 SPIFFS 加载图像的
,所以我不明白为什么我的代码不起作用。
我非常感谢任何帮助!
代码:
全选// Import required libraries
#include
#include
// WiFi parameters
//const char* ssid = "xyz";
//const char* password = "xyz";
const char* ssid = "Vandelay Industries";
const char* password = "Bianchi262";
File webFile;
// The port to listen for incoming TCP connections
#define LISTEN_PORT 80
// Create an instance of the server
WiFiServer server(LISTEN_PORT);
void setup() {
// Start Serial
Serial.begin(115200);
SPIFFS.begin();
// Connect to WiFi
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
Serial.println("");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()) {
delay(1);
}
// Build the response
String str = String("");
str += "";
str += "";
str += "";
str += "";
str += "";
// str += "
"; // doesn't work - shows blue square with ?
// str += "
"; // doesn't work - shows blue square with ?
str += "";
str += "";
// Print all at once for faster response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println(str);
delay(1);
Serial.println("Client disconnected");
Serial.println("");
}