嘿，这个小技巧还挺有意思的！我来给你掰扯清楚～

你看到的 <span id="pie">不</span> 其实根本不是传统意义上的“嵌入式图片”——它玩的是Unicode象形字符的小把戏！

现代浏览器会把一些特殊的Unicode字符渲染成图形化的样子，看起来跟图片一模一样，但本质上它就是个文本字符。比如你看到的“不”，大概率是博客里的排版显示问题（或者是输入时的特殊字符），实际对应的可能是类似🥧（派的emoji）这类本身就长得像饼图的字符，不需要任何<img>标签或CSS，只要浏览器能识别这个Unicode码点，就能直接显示成“图片”效果。

咱们常说的嵌入式图片（比如用<img>标签的那种），流程是这样的：

• 浏览器解析到<img>标签时，先读取src属性里的资源地址——可以是本地文件路径、远程URL，甚至是Base64编码的字符串
• 接着向服务器（或本地文件系统）发起请求，获取图片资源
• 拿到资源后，浏览器会根据图片的编码格式（比如JPEG、PNG）进行解码，把二进制数据转换成像素图形
• 最后在页面的指定位置渲染出这张图片

另外还有一种“无请求”的嵌入式方式：Base64编码嵌入。就是把图片文件转换成一串Base64字符串，直接写在HTML里（比如 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">），浏览器直接解码这个字符串就能得到图片，不需要额外请求服务器。

先讲你看到的“字符模拟图片”方式 #

这种方式能实现的“图片”非常有限，只能是Unicode字符集中存在的象形符号：

• 各类emoji表情：比如🍕（披萨）、🐱（猫咪）、🔧（工具）等
• 传统特殊符号：比如☕（咖啡）、⭐（星星）、♠（黑桃）等
• 小众象形Unicode字符：比如🗺️（地图）、📱（手机）等

再讲真正的HTML嵌入式图片 #

用<img>或Base64嵌入的方式，支持的图片类型就多了去了：

• 主流格式：JPEG、PNG、GIF、WebP、SVG
• 兼容格式：BMP、TIFF（部分现代浏览器支持）、AVIF（新一代高效格式）等

内容的提问来源于stack exchange，提问作者vbrin27