乐鑫技术交流
直播中

打马过草原

10年用户 983经验值
擅长:可编程逻辑 电源/新能源
私信 关注
[问答]

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

最近几天我一直在为此苦苦挣扎,所以我想我终于问了知识渊博的人。
目前我从 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("");
}

更多回帖

发帖
×
20
完善资料,
赚取积分