Flask应用中如何显示Summernote生成的Base64编码图片？

我来帮你排查这个问题，这种Base64图片显示失败的情况我之前开发博客时也碰到过，大概率是这几个环节出了问题，咱们一步步来定位解决：

1. 先检查数据库字段的存储容量 #

Base64编码后的图片体积会比原文件大30%左右，如果你的数据库字段长度不够，会直接导致Base64字符串被截断，图片自然就破损了。

• 别用VARCHAR类型，它最大只能存65535个字符，稍微大一点的图片Base64肯定超了。建议改成TEXT或者LONGTEXT（如果是高清大图的话，LONGTEXT更稳妥）。
• 可以直接从数据库里取出存储的文章内容，对比前端提交的原始HTML，看看img标签里的Base64字符串是不是完整的——如果结尾明显不对，那就是被截断了，换字段类型就行。

2. 确认Base64的格式是否完整 #

Summernote插入图片时，生成的img标签应该是这种格式：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

要检查数据库里存储的内容是不是包含完整的data:image/xxx;base64,前缀：

• 如果前缀丢了，浏览器根本识别不了这是Base64图片，自然显示破损。这种情况可能是后端处理时不小心把前缀过滤掉了，或者前端提交时出了问题，得排查存储前的处理逻辑。

3. 排查渲染时的转义问题（别忽略|safe的细节） #

虽然你用了{{ blog.post | safe }}，但有时候还是会有转义问题：

• 比如后端存储前误用了Flask的escape()函数，把引号转成了"，那渲染出来的img标签会变成：

  <img src=&quot;data:image/png;base64,xxxx...&quot; />
  

  浏览器解析这个src的时候就会出错。你可以打开浏览器开发者工具，看一下页面上img标签的src属性，有没有这类多余的转义字符。如果有，去掉后端不必要的转义逻辑就行。

4. 检查Base64字符串里的多余字符 #

有时候存储过程中，Base64字符串会被自动加上换行或者空格，这也会导致解码失败：

• 你可以把数据库里的Base64字符串复制出来，手动去掉所有换行和空格，然后放到本地的Base64解码工具里试试能不能出图。如果可以，那就在后端存储前加一步处理：

  # 假设post_content是前端提交的HTML内容
  import re
  # 清理Base64部分的换行和空格
  cleaned_content = re.sub(
      r'(data:image/[^;]+;base64,)(\s*[^\s"]+)',
      lambda m: f'{m.group(1)}{m.group(2).replace("\n", "").replace(" ", "")}',
      post_content
  )
  

5. 做个最小化测试验证 #

如果上面的方法都没解决，你可以构造一个最简单的测试场景：

• 手动写一段包含正确Base64图片的HTML，比如：

  <p>测试图片</p>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=" />
  

• 把这段内容存入数据库，然后用{{ blog.post | safe }}渲染，看能不能显示出一个小方块图片。如果能显示，说明问题出在Summernote的提交或者后端处理逻辑上；如果还是不行，那就要检查Flask的配置或者数据库的字符集（比如是不是用了utf8mb4，避免字符编码问题）。

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