一、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);