MongoDB中存储的Base64图片无法在EJS img标签显示，求解答

嘿，我一眼就瞅出问题所在啦！你存储到MongoDB里的Base64图片数据多了一层外层的双引号——看你给出的存储格式："data:image/png;base64,iVBORw0KGgo..."，前后的双引号是字符串本身的一部分，但浏览器需要的src值是不带这层引号的data:image/png;base64,iVBORw0KGgo...。

当你直接写img标签时，是手动把正确的Base64内容放在双引号里，所以能正常显示；但用EJS的<%= data %>输出时，会把存储的带引号的字符串原封不动输出，导致最终的img标签变成这样：

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

浏览器解析时，会把第一个双引号当成src属性值的结束标记，后面的内容就都乱了，自然显示不出图片。

给你两个解决办法，推荐用第一个：

• 方式1：修复存储的数据（最优解）
  在把Base64数据存入MongoDB之前，先去掉外层的双引号。比如在JavaScript里，可以用正则替换掉首尾的引号：

  // 假设data是你要存储的带引号的字符串
  const cleanedData = data.replace(/^"|"$/g, '');
  // 然后把cleanedData存入MongoDB
  

  或者如果这个带引号的字符串是JSON格式的，直接用JSON.parse(data)就能得到原始的Base64内容，再存进去。

• 方式2：在EJS模板中临时处理
  如果暂时没法修改存储的数据，就在EJS输出时处理掉这层引号，记得给src属性加上规范的双引号：

  <img src="<%= data.replace(/^"|"$/g, '') %>"/>
  

  或者用JSON解析来获取原始内容：

  <img src="<%= JSON.parse(data) %>"/>
  

这样调整后，图片应该就能正常显示啦！

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