浏览器重复插入'#10;'在每个新行的base64字符串中？答案

【问题标题】：Browsers insert repeatedly '#10;' in base64 string on every new line?浏览器重复插入'#10;'在每个新行的base64字符串中？
【发布时间】：2019-06-11 15:59:53
【问题描述】：

我想在浏览器上显示已经收到编码为 Base64 的 jpg 图像。 1.所以我将jpg图像上传到我的后端。 2. 然后我想在浏览器上显示那个上传的图片。

在 Safari 上它工作正常，我有以下检查：

src="data:image/jpeg;base64,_9j_4AAQSkZJRgABAQAAAQABAAD_2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH_2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH...

但在所有其他浏览器上，我看不到完全相同的图像，因为其他 base64 标记在 base64 之间重复出现 #10; 为：

src="data:image/jpeg;base64,_9j_4AAQSkZJRgABAQAAAQABAAD_2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB&#10;AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH_2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEB&#10;AQEBAQEBAQE...

所以其他浏览器显然会在出现新行的地方插入#10;..

我从 Android 智能手机上传并通过以下方式编码为 base64：

Base64.encodeToString(jpgStream.toByteArray(), Base64.URL_SAFE);

我该如何解决这个问题？ 是后端相关还是浏览器甚至 Android 客户端？

【问题讨论】：

我很困惑这是您的服务器从浏览器接收数据（问题的第一行）还是向浏览器发送数据（问题的其余部分）的数据。你能为我解开这个困惑吗？
@CaiusJard 改述见上文
您确定没有其他透明进程在某处对 src 属性中的数据执行 URL 编码吗？
@CaiusJard 我不这么认为，我会再检查一次。但是如果是这样，在Safari浏览器上不会也被破坏了吗？

标签： android google-chrome browser safari base64

【解决方案1】：

我认为在服务器端将您的\n 编码为&#10;，Safari 再次将其删除，而不是其他浏览器添加它。

这个 HTML 对我来说在 chrome 中可以正常工作（将它保存在桌面上名为 a.html 的文件中并打开它）：

<html><body><img src="data:image/png;base64, iVBORw0KGgoAAAAN
  SUhEUgAAAAUA
  AAAFCAYAAACNbyblAA
  AAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
  9TXL0Y4OHwAAAABJRU5ErkJggg=="></img></body></html>

我认为您可能需要在问题中添加更多代码，显示您如何检索数据、base64 数据、将其合并到发送到浏览器的页面等

另外，在浏览器开发工具或网络调试代理（如 Fiddler）中查看来自服务器的原始响应，以准确了解服务器发送的内容 - 使用 Inspect Element 可能会在数据解析后向您显示数据/解释/渲染而不是原始

【讨论】：

它没有换行，正如你在第一个代码 sn-p 中看到的那样。其他浏览器在此处插入新行..
第二个代码sn-p在字符串中注入了多个#10;。