Load image from SPIFFS into html webpage

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Load image from SPIFFS into html webpage

By kbless7
- Sun Nov 06, 2016 9:43 am #57738 Hi,

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!

Code: Select all// 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("");
}
You do not have the required permissions to view the files attached to this post.
User avatar

Re: Load image from SPIFFS into html webpage

By martinayotte
- Fri Nov 11, 2016 10:16 am #57987 You are obviously not understanding how HTTP requests are working.
When the browser is parsing the HTML, it figures out that new requests for the images are needed.
But your code doesn't handle any URL parsing to figure out what those new requests are.

Using plain WiFi TCP class would be rather complex thing and re-inventing the wheel.

You're better looking at the ESP8266WebServer and create handlers for each URL paths using server.on(), one for the main page, and one for each images.
User avatar

Re: Load image from SPIFFS into html webpage

By ESPloradores
- Sun Mar 05, 2017 6:14 pm #63391 I´m trying to load one image (image_01.jpg) in an HTML page (index.html) with this sketch:

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FS.h"

// Access point credentials
const char *ssid = "Image",
           *password = "123456789";

ESP8266WebServer server(80);

void handleRoot() {
    // Just serve the index page from SPIFFS when asked for
    File index = SPIFFS.open("/index.html", "r");
    server.streamFile(index, "text/html");
    index.close();
}

void send_photo() {
    // Just serve the index page from SPIFFS when asked for
    File Imagen_Vectorial = SPIFFS.open("/Image_01.jpg", "r");
    server.streamFile(Image_01, "image/jpeg");
    Imagen_Vectorial.close();
}

void setup() {
    SPIFFS.begin();

    // The IP will be 192.168.4.1
    WiFi.softAP(ssid, password);
    // The root handler
    server.on("/", handleRoot);
    server.on("/photo", send_photo);
    server.begin();
}

void loop() {
    server.handleClient();


The index.htm is this:

Code: Select all<!DOCTYPE html>
<html>
<canvas id="img" width="400" height="287">
</canvas>


<script type="text/javascript">

   function RequestPhoto() {
      var req = new XMLHttpRequest();
      req.open('GET', '/photo' );
      req.send(null);
   }

   function img_canvas() {
      var canvas = document.getElementById("img");
      var context = canvas.getContext("2d");
      var img = new Image(400,287);
      img.src = RequestPhoto();
      context.drawImage(img, 0, 0);
   };
</script>


<body onLoad="img_canvas()">
</body>
</html>


The file image_01.jpg is the following: http://www.definicionabc.com/wp-content ... torial.jpg

Both, the index.htm and the image_01.jpg are loaded in the SPIFFS system.

It doesn´t work.
Does anyone know what is the problem???


Thanks!!!
 Reply
Return to General Discussions