当前位置：首页 > news >正文

ESP32-HTML-08

news 来源：原创 2025/6/21 18:19:11

一、html显示图片

1.工程包含Html需要显示的图片

2、CMakeLists.txt包含图片资源

举例：

idf_component_register(SRCS main.cEMBED_FILES root.html  favicon.ico)

3.html中图片的标签

<img src="motus.ico">

4.后台代码的添加

static esp_err_t motus_get_handler(httpd_req_t *req)
{extern const unsigned char favicon_ico_start[] asm("_binary_motus_ico_start");extern const unsigned char favicon_ico_end[]   asm("_binary_motus_ico_end");const size_t favicon_ico_size = (favicon_ico_end - favicon_ico_start);httpd_resp_set_type(req, "image/x-icon");httpd_resp_send(req, (const char *)favicon_ico_start, favicon_ico_size);return ESP_OK;
}static const httpd_uri_t html_motus_ico = {.uri       = "/motus.ico",.method    = HTTP_GET,.handler   = motus_get_handler,.user_ctx  = NULL
};httpd_register_uri_handler(server, &html_motus_ico);

二、html添加样式文件

1.工程包含Html需要的样式文件

2、CMakeLists.txt包含样式资源

idf_component_register(SRCS main.cEMBED_FILES root.html style.css favicon.ico motus.ico)

3.html中样式的链接

<link rel="stylesheet" type="text/css" href="style.css">

4.后台代码的添加

static esp_err_t css_get_handler(httpd_req_t *req)
{extern const unsigned char css_start[] asm("_binary_style_css_start");extern const unsigned char css_end[]   asm("_binary_style_css_end");const size_t css_size = (css_end - css_start);httpd_resp_set_type(req, "text/css");httpd_resp_send(req, (const char *)css_start, css_size);return ESP_OK;
}static const httpd_uri_t html_css = {.uri       = "/style.css",.method    = HTTP_GET,.handler   = css_get_handler,.user_ctx  = NULL
};httpd_register_uri_handler(server, &html_css);

三、html添加js文件

1.工程包含Html需要的js文件

2、CMakeLists.txt包含样式资源

idf_component_register(SRCS main.cEMBED_FILES root.html style.css script.js favicon.ico motus.ico)

3.html中js的链接

<script src="script.js"></script>

4.后台代码的添加

static esp_err_t js_get_handler(httpd_req_t *req)
{extern const unsigned char js_start[] asm("_binary_script_js_start");extern const unsigned char js_end[]   asm("_binary_script_js_end");const size_t js_size = (js_end - js_start);httpd_resp_set_type(req, "text/js");httpd_resp_send(req, (const char *)js_start, js_size);return ESP_OK;
}//得到用户名和密码
static const httpd_uri_t html_js = {.uri       = "/script.js",.method    = HTTP_GET,.handler   = js_get_handler,.user_ctx  = NULL
};httpd_register_uri_handler(server, &html_js);