[问答]

如何将SPIFFS中的图像加载到html网页中？

问答对人有帮助，内容完整，我也想知道答案 0 最近几天我一直在为此苦苦挣扎，所以我想我终于问了知识渊博的人。目前我从 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 += " "; // set form to post method str += " str += "background:/images/skull-on.jpg;"; // doesn't work - makes the button background gray // str += "background:url();"; // works str += "background-repeat:repeat-x;"; // repeat image in x direction str += "background-position:center;"; // center images in button str += "background-size:contain;"; // scale image to button size str += "height:20vh;"; // variable height str += "width:90vw;"; // variable width str += "font-size:48px;"; // text size 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(""); } 0
2023-2-27 07:52:19　　评论淘帖0 邀请回答您可以邀请以下用户，快速回答问题 × wang21cj 该类别下有 38 个回答。邀请回答 hgimtk 该类别下有 38 个回答。邀请回答新星之火12138 该类别下有 33 个回答。邀请回答 zyh34997 该类别下有 32 个回答。邀请回答就好国dd 该类别下有 32 个回答。邀请回答 chm5 该类别下有 32 个回答。邀请回答 heks 该类别下有 31 个回答。邀请回答 zaichenxi 该类别下有 31 个回答。邀请回答 flowerddd 该类别下有 29 个回答。邀请回答 muwersddg 该类别下有 29 个回答。邀请回答四川赵赵该类别下有 29 个回答。邀请回答星星公交站该类别下有 28 个回答。邀请回答 vinww特烦恼该类别下有 28 个回答。邀请回答 caosurround 该类别下有 28 个回答。邀请回答 gvjhvbc 该类别下有 27 个回答。邀请回答安德森大该类别下有 27 个回答。邀请回答 xwgc888 该类别下有 27 个回答。邀请回答 lkjflksjfsa 该类别下有 27 个回答。邀请回答 h1654155143.8331 该类别下有 27 个回答。邀请回答 723662364d 该类别下有 27 个回答。邀请回答举报打马过草原相关推荐 • 如何将IIC文件加载到Xilinx平台电缆USB II中使用的EEPROM中去？ 2006 • esp8266如何将这些变量发送到spiffs上的html？ 594 • 如何将.bin文件加载到Huzzah ？ 661 • 如何将解密后的用户程序加载到RAM中并执行？ 555 • 急急急，如何将modbus library加载到lv的express vis中 2697 • TouchGFX图像直接加载到闪存中并映射到BitmapDatabase.cpp中是为什么？ 341 • 如何使用SPIFFS快速提供Bootstrap内容？ 476 • 如何将ESP8266-02模块连接到动态IP的网页呢？ 592 • 如何将MPI的值复制到ESP32中的文件？ 510 • 如何将原理图的某些电路不加载到PCB中去？ 2702