以正确的方式在浏览器中显示 blob答案

【问题标题】：Showing blobs in the browser the right way以正确的方式在浏览器中显示 blob
【发布时间】：2019-11-07 00:30:23
【问题描述】：

我正在接收来自服务器的 JSON 响应，但是使用 data URI 会遇到一些常见问题，例如长度限制更不用说安全问题等。

通过搜索，我找到了一些useful examples，例如createObjectURL 和FileReader。但是图像不显示。

因此，blob 采用 base64 编码并以 JSON 格式发送。 $json_array[]= base64_encode($flal_file);

在 JavaScript 中，我会执行以下操作：

尝试 1（源代码中显示 URL 但图片不显示）：

$(data).each(function(index,data){ 
var typedArray = data;
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); 

var url = URL.createObjectURL(blob);
res = '<img  src="'+url+'"/>';

});

尝试 2（得到未定义的结果）：

const blb    = new Blob(data, {type: "text/plain"});
const reader = new FileReader();

// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
  const text = e.srcElement.result;
  console.log(text);
});


// Start reading the blob as text.
reader.readAsText(blb);

由于长度限制，浏览器无法读取整个 blob。也许我需要缩短来自服务器的响应。

【问题讨论】：

我可能是错的，但application/octet-stream 有一些奇怪的地方。如果要下载文件，通常会使用此选项。您是否尝试使用原始图像的 mime 类型？
Creating a Blob from a base64 string in JavaScript的可能重复
由于某种原因，一些 blob 会显示在 Microsoft Edge 上，但不会显示在 Chrome 和 Firefox 中。我还在重复问题中使用了 Jeremy 的答案来缩短网址，但问题仍然存在。 – Gragas 11 分钟前进来

标签： javascript jquery blob

【解决方案1】：

尝试加载您的图像字节数组，如下所示：

<img  src="data:image/jpg;base64, imageBytes"/>

【讨论】：