{"id":86386,"date":"2019-07-05T16:59:57","date_gmt":"2019-07-05T16:59:57","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=86386"},"modified":"2025-03-17T12:31:53","modified_gmt":"2025-03-17T12:31:53","slug":"display-images-esp32-esp8266-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/display-images-esp32-esp8266-web-server\/","title":{"rendered":"How to Display Images in ESP32 and ESP8266 Web Server"},"content":{"rendered":"\n

This tutorial shows how to display images (.png and .jpg) in your ESP32 or ESP8266 web servers using Arduino IDE. We cover how to embedded images in an asynchronous web server using the ESPAsyncWebServer library or in a simple HTTP server.<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n

Display Images on ESP Web Server<\/h2>\n\n\n\n

There are different ways to display an image in your ESP32\/ESP8266 web servers. In this article, we’ll cover the following methods:<\/p>\n\n\n\n

    \n
  1. Embed the image by referring to its URL (hyperlink <\/strong>to where the image is stored);<\/li>\n\n\n\n
  2. Store the image in the ESP32\/ESP8266 filesystem (LittleFS);<\/li>\n\n\n\n
  3. Convert the images to base64.<\/li>\n<\/ol>\n\n\n\n

    Option #1: Image URL<\/h2>\n\n\n\n

    To include images in HTML, you use the <img><\/span> tag with the src<\/span> attribute, as follows:<\/p>\n\n\n\n

    <img src=\"image_source\"><\/code><\/pre>\n\n\n\n
    You can use an URL that links to the source of any image that is store on the internet.<\/p>\n\n\n\n
    <img src=\"https:\/\/example.com\/your_image_source_url.png\"><\/code><\/pre>\n\n\n\n
    So, to display the image, you just need to include the previous HTML text in your web server code.<\/p>\n\n\n\n
    For a web server example, you can read the following articles:<\/p>\n\n\n\n