Arduino IDE 2.3.6 not showing images in custom HTML during Serial output

Projects Networking, Protocols, and Devices
1

Hi

I’m working on a project where my Arduino sketch sends HTML content over the serial monitor (for example, using Serial.println() to simulate a basic web interface). Everything works fine for displaying text and buttons, but I can’t seem to get any images to show up in the browser when I open the serial output in a tool that parses it.

Here’s a simplified version of what my sketch is doing:

Serial.println("<html>");
Serial.println("<head><title>Test Page</title></head>");
Serial.println("<body>");
Serial.println("<h1>Welcome</h1>");
Serial.println("<img src='logo.png' alt='Logo'>");
Serial.println("</body>");
Serial.println("</html>");

What’s going wrong:

  • The image doesn't appear in the browser.
  • Instead, I see a broken image icon or nothing at all.
  • This happens with both local paths like logo.png and full URLs like https://example.com/image.jpg.

What I’ve tried:

  • Verified the image file exists and works when opened directly in the browser.
  • Tried using full URLs instead of local files — same result.
  • Changed img tag formatting (e.g., self-closing tag, adding width/height).
  • Tried different browsers.
  • Ensured that Content-Type: text/html is set (in tools that accept HTTP headers).

My questions:

  1. Is it even possible to render images this way via Serial output, or am I misunderstanding how the browser interprets this content?
  2. Do I need to encode the image as base64 and send it inline instead?
  3. Would switching to a proper web server approach (e.g., ESP32/ESP8266 hosted page) be the right solution if I want full HTML rendering with images?
2

Hi @smartdeveloper887.

So when you say "tool that parses it", did you really mean your web browser?

Is the file in the same folder as the HTML file?

You must use a URL of an image file that actually exists. That one doesn't exist, so the result you observed is expected.

No, it is not possible to render images via serial output in the manner you shared here.

However, that is not a problem because your sketch code isn't even attempting to render an image. What it is actually doing is rendering HTML code via serial output. Since HTML is just text, you can certainly do that. If the serial output is valid HTML, then you can save the output into a .html file and open the file in a web browser. The web browser will be able to display any images that are specified by the HTML code.

3

Explain the steps from the serial output to the browser. What is this "tool"? When you say

Ensured that Content-Type: text/html is set (in tools that accept HTTP headers)

please be more specific.

How are your steps different than putting bytes in a file and then opening that file with the browser?