I've been struggling with this for the last few days, so I'd thought I finally ask the knowledgeable people.
Currently I load an image from imgur as the background of a submit button. This works, which I have marked in the attached sketch file. I would like to move this operation locally so that I use less data and don't have to rely on imgur being responsive.
I've loaded some jpegs to SPIFFS using the arduino-esp8266fs plugin . I have confirmed they are on SPIFFS using the FSBrowser example under ESP8266WebServer. When I try and set the image as the background of the submit button, it doesn't appear; the button background will either be white or gray depending on how I specify the image location as I note in the code.
I've also tried to just load the image without the form to no avail. On the safari desktop browser it shows the blue square with a question mark. On an iPhone it doesn't show anything.
I'm not a webpage coder, but I don't think my header is the issue as it all works when I reference the imgur url. I've tried using this example which can load images from SPIFFS, so I don't see why my code doesn't work.
I greatly appreciate any help!
// Import required libraries
#include <ESP8266WiFi.h>
#include <FS.h>
// 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("<!DOCTYPE HTML>");
str += "<html>";
str += "<head>";
str += "<meta name='apple-mobile-web-app-capable' content='yes' />";
str += "<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />";
str += "</head>";
// str += "<img src=url(/images/skull-on.jpg)>"; // doesn't work - shows blue square with ?
// str += "<img src=/images/skull-on.jpg>"; // doesn't work - shows blue square with ?
str += "<form action='/Up' method='post' style=height:1000vh;width:100vw;>"; // set form to post method
str += "<input type='submit' value='' style="; // submit button
// str += "background:url(/images/skull-on.jpg);"; // doesn't work - makes the button background white
str += "background:/images/skull-on.jpg;"; // doesn't work - makes the button background gray
// str += "background:url(http://i.imgur.com/265C61Z.jpg);"; // 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 += "></form>";
str += "</html>";
// 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("");
}