ESP32-Web-Server编程-在网页中插入图片
概述
图胜与言，在网页端显示含义清晰的图片，可以使得内容更容易理解。
需求及功能解析
本节演示在 ESP32 Web 服务器上插入若干图片。在插入图片时还可以对图片设置一个超链接，用户点击该图片时，网页将跳转到图片对应的链接网址。
示例解析
-
目录结构
├── CMakeLists.txt ├── main │ ├── CMakeLists.txt │ └── main.c User application ├── components │ └── fs_image └── README.md This is the file you are currently reading- 目录结构主要包含主目录 main，以及组件目录 components.
- 其中组件目录components中包含了用于存储网页文件的 fs_image 目录。
前端代码
前端代码设置了插入图片的文件名，并设置 snow.png 图片的超链接：
<body>
<h2>ESP Image Web Server</h2>
<img src="sun.png">
<img src="sun-cloud">
<img src="cloud.png">
<img src="rain.png">
<img src="storm.png">
<p>
<a href="https://blog.csdn.net/wangyx1234?spm=1010.2135.3001.5343">
<img src="snow.png"></a>
</p>
</body>
后端代码
后端代码仍旧使用前述基于 spiffs 的文件系统，存储 Web 需要的后端资源。
示例效果
点击最后一个“snow" 图片，将自动跳转到前端文件指定的网址。
讨论
1）通过网页下载设备上的数据，这种无前端文件的 Web 服务器非常有用。相比串口、这种下载速度快，使用更便捷。
总结
1）本节主要是介绍在 ESP32 Web Server 上插入图片。并设置图片的超链接。
资源链接
1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）
3）下一篇：
(码字不易感谢点赞或收藏)
![[BPE]论文实现：Neural Machine Translation of Rare Words with Subword Units](https://img-blog.csdnimg.cn/direct/47454a3e05e34e47877d84186e257db6.png)
