Как отдать браузеру картинку?

[Vovka]

По ссылке в браузере:

<a href="http://192.168.1.253/imgs?i=1">Картинка</a>

отправляю массив так:

const char _ar01[] PROGMEM =  {255,216,255,224,0,16,74,70,73,70,0,.. и так далее весь массив картинки};
HTTP.send_P(200, "image/jpeg", _ar01);

В браузере выводится такое сообщение:

Изображение "http://192.168.1.253/imgs?i=1" не может быть показано, так как содержит ошибки

Как исправить?

 

[saharesp]

Возможно нужно название на английском. Если ваша картинка находится на вашей html - странице и не выводится на экран, то я такое реализовывал, создавая на esp8266 файловую систему SPI, загружал на плату все файлы, я бы даже сказал, сайта, вместе с картинками, java, css и все это прекрасно выводилось в браузер вместе с картинками.

 

[CodeNameHawk]

<a href="http://192.168.1.253/imgs?i=1">Картинка</a>

Попробуйте <a href="http://192.168.1.253/img.jpg">Картинка</a>

 

[Vovka]

Вот набросал тестовый проект.
Если вызываю по этому варианту, то картинка выводится:

http://192.168.1.10/g1

,
а если вариант для больших картинок

http://192.168.1.10/g2

- нет.

Спойлер

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

//#define WFI_CONNECT_AP

#ifdef WFI_CONNECT_AP
    #define AP_SSID    "TEST_AP"
    #define AP_PASSW    ""
#else
    #ifndef STASSID
        #define STASSID "TP-Link"
        #define STAPSK  "12345678"
    #endif
    const char* ssid = STASSID;
    const char* password = STAPSK;
#endif

ESP8266WebServer server(80);

static const uint8_t gif[] PROGMEM = {
  0x47, 0x49, 0x46, 0x38, 0x37, 0x61, 0x10, 0x00, 0x10, 0x00,
    0x80, 0x01, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0x2c,
    0x00, 0x00, 0x00, 0x00, 0x10, 0x00, 0x10, 0x00, 0x00, 0x02,
    0x19, 0x8c, 0x8f, 0xa9, 0xcb, 0x9d, 0x00, 0x5f, 0x74, 0xb4,
    0x56, 0xb0, 0xb0, 0xd2, 0xf2, 0x35, 0x1e, 0x4c, 0x0c, 0x24,
    0x5a, 0xe6, 0x89, 0xa6, 0x4d, 0x01, 0x00, 0x3b
};

void handleRoot() {
  digitalWrite(LED_BUILTIN, 1);
  server.send(200, "text/plain", "hello from esp8266!");
  digitalWrite(LED_BUILTIN, 0);
}

void setup(void)
{
  Serial.begin(115200);

#ifdef WFI_CONNECT_AP
    WiFi.mode( WIFI_AP );
    WiFi.setAutoReconnect( 1 );
    WiFi.softAPConfig( IPAddress(192, 168, 1, 10), IPAddress(192, 168, 1, 1), IPAddress(255, 255, 255, 0) );
#else
    WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
#endif

    Serial.println("");

#ifndef WFI_CONNECT_AP
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
#endif
    Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);

// 1111111111111111111111111111111111111111
  server.on("/g1", []() {
        char gif_colored[ sizeof(gif) ];
        memcpy_P( gif_colored, gif, sizeof(gif_colored) );
        server.send( 200, "image/gif", gif_colored, sizeof(gif_colored) );
  });

// 2222222222222222222222222222222222222222
  server.on("/g2", []() {

        #define BUF_LEN 20

        char gif_colored[BUF_LEN];
        int a, L, d;
        L = sizeof(gif);
        
//        server.sendHeader("Content-Type", "image/gif");
        server.send ( 200, "image/gif" );
        server.setContentLength( L );
//        server.setContentLength(CONTENT_LENGTH_UNKNOWN);

        for( a=0; a<L; ) {
            d = L-a < BUF_LEN ? L-a : BUF_LEN;
            memcpy_P( gif_colored, gif, d );
          server.sendContent_P( gif_colored, d );
            a += d;
        }
        server.sendContent("");
  });

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}

Как исправить второй вариант?

 

[pvvx]

Не правильно сформирован заголовок HTTP.
Нарушены последовательности и/или терминаторы заголовка.

server.setContentLength( L );
server.send ( 200, "image/gif", "");

 

[Vovka]

Пробовал и так - не выводит картинку!

 

[CodeNameHawk]

а если вариант для больших картинок

Если большая, то браузер может не хотеть получить все сразу.
Откройте консоль в браузере и смотрите что да как.

 

[Vovka]

Под спойлером выше исходник. Там одна и та же картинка передается разными способами. Второй не работает. Подозреваю что-то с заголовками...

 

[CodeNameHawk]

Подозреваю что-то с заголовками...

Не правильно подозреваете.
Ваш код выдает:

1. Про длину написал pvvx
После исправления длины:

Видна разница?
2. На куски разбили, но посылаете все время один и тот же кусок.