Serving images from SPIFFS

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

Serving images from SPIFFS

By flagtrax
- Wed Feb 12, 2020 12:15 pm #85621 Hi All,
I'm playing with a project where I want to control an output, (easy enough). Then I want to send an image from SPIFFS indicating the status of said output. IE: If a light is on, send a glowing lightbulb, conversely if it is off send a dim lightbulb. In addition provide a control button. I've built servers sending merely buttons, and I can send a spiff image using the method shown herehttps://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/ without problems. Where my knowledge is lacking is; first, how to intigrate the image into an HTML document with the button control, and send it with the appropriate image(either/or). When experimenting with just sending an HTML referencing the image it doesn't come through, only the placeholder is shown.
Secondly I haven't been successful in serving different images on conditions. IE: Test flag for status, and send appropriate image. Just learning SPIFFS, and very new to HTML. Any help greatly appreciated.
User avatar

Re: Serving images from SPIFFS

By RichardS
- Wed Feb 12, 2020 12:51 pm #85622
Code: Select allbool lightOn = false;

server.on("/light.png", HTTP_GET, [](AsyncWebServerRequest *request){
 if(lightOn) request->send(SPIFFS, "/lighton.png", "image/png");
else request->send(SPIFFS, "/lightoff.png", "image/png");
});


HTML

<img src="light.png"/>
User avatar

Re: Serving images from SPIFFS

By flagtrax
- Wed Feb 12, 2020 4:44 pm #85628 Hi Richard, and thanks for the reply. I think I've tried that approach, maybe not to the letter but very closely. A difference I can immeadiatly see is that in the HTML part, (in the sketch I used to display images successfully) to get access to either image, both needed an image src tag or only a placeholder was presented. And when both were present, still since the HTML doc had an image tag for both since only one was served by the 'if' statement, the other generated a placeholder. (atleast that's what I believe is happening, feel free to correct me if I'm wrong.) My other (lack of) understanding is how to also add a button to be reacted to I can do each on their own, but my scatterbrain can't seem to wrap around integrating the two. My ultimate desire was to have the image be the button using css styles, or use an HTML input tag such as <input type="image" src="img_submit.gif"> and all the playing so far has been experimentation in an effort to do that. But what I got as a result from that was yet another placeholder as if the image couldn't be found in spiffs. I'll play with what you've kindly provided and see how that goes. Thanks again!
 Reply
Return to Newbie Corner