• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Нужна помощь Отправка картинки с файловой системы на страницу

Всем привет!
Возникла необходимость добавить на страницу несколько картинок...
Собственно вопрос состоит в том как их передать, нашёл пример как передавать саму страницу с FS, но с картинкой ничего не выходит :(
Помогите пожалуйста кому не трудно)
 

tretyakov_sa

Moderator
Команда форума
Если web сервер работает. То любая картинка вставляется на страницу как обычная картинка.
 

Сергей_Ф

Moderator
Команда форума
@Александр663454 если вы покажете, как у вас не работает, то тогда помогут. А у экстрасенсов сегодня выходной.
п.с. диска С: на esp нет, если что.
 
@Александр663454 если вы покажете, как у вас не работает, то тогда помогут. А у экстрасенсов сегодня выходной.
п.с. диска С: на esp нет, если что.
Что там показывать то, подключаю стандартно через <img>, картинка лежит вместе со страницей на есп. Возможно я что то не так делаю, с есп недавно работаю...
 

Сергей_Ф

Moderator
Команда форума
@Александр663454 что значит "через <img>? Вы код скетча на esp покажите. Или она должна по вашему желанию что то делать?
Вы подняли на ней веб-сервер? Обработчик запросов поставили?
 
@Александр663454 что значит "через <img>? Вы код скетча на esp покажите. Или она должна по вашему желанию что то делать?
Вы подняли на ней веб-сервер? Обработчик запросов поставили?
По желанию было бы хорошо;)
Вот обработчик:

void handleRoot(){
File file = SPIFFS.open("/index.htm", "r");
size_t sent = server.streamFile(file, "text/html");
file.close();
}
 

tretyakov_sa

Moderator
Команда форума
По желанию было бы хорошо;)
Вот обработчик:

void handleRoot(){
File file = SPIFFS.open("/index.htm", "r");
size_t sent = server.streamFile(file, "text/html");
file.close();
}
Вы нормально веб сервер сделайте или пишите обработчик и на адрес картинки.
 

CodeNameHawk

Moderator
Команда форума
Этот код вы где то то то выдрали.
Смотрите пример FSWebServer а ардуиноиде.
 

CodeNameHawk

Moderator
Команда форума
На него не надо смотреть, тупо копируете и вуаля.

Забросьте ему файлы index.html (это в папку data, которая должна быть в папке проекта)
HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>"(c) by kmh"</title>
</head>
<body>
  <p><img src="images/dzen.png" alt="Pisma mastera dzen"></p>
</body>
</html>
и в папку images файл dzen.png
dzen.png

Загрузите скетч, загрузите файловую систему.
Откройте по адресу есп (который виден в сом)
IP/index.html

Если ищите что то особенное, пишите не стесняйтесь, так как экстрасенсы уехали в теплые края.
 
На него не надо смотреть, тупо копируете и вуаля.

Забросьте ему файлы index.html (это в папку data, которая должна быть в папке проекта)
HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>"(c) by kmh"</title>
</head>
<body>
  <p><img src="images/dzen.png" alt="Pisma mastera dzen"></p>
</body>
</html>
и в папку images файл dzen.png
Посмотреть вложение 6770

Загрузите скетч, загрузите файловую систему.
Откройте по адресу есп (который виден в сом)
IP/index.html

Если ищите что то особенное, пишите не стесняйтесь, так как экстрасенсы уехали в теплые края.
Хорошо попробую, как я понял смысл в том что нужно создать папку images в папке data и туда скинуть картинку? Или надо ещё какой то дополнительный код для самой есп писать для этого?
 

CodeNameHawk

Moderator
Команда форума
смысл в том что нужно создать папку images в папке data и туда скинуть картинку?
Нет. Папка только для вашего удобства. Есть папка или ее нет, надо правильно указать путь к файлу.
Или надо ещё какой то дополнительный код для самой есп писать для этого?
В есп должен быть код WebServer, который выдаст файл по запросу.
В примере запрос файла это
HTML:
<p><img src="images/dzen.png" alt="Pisma mastera dzen"></p>
ну и сам index.html файл.
И что у вас увиделось?
 
Сверху Снизу