为什么我用laravel框架的Storage::get(xxx);输出的文件流，前端无法显示？

Question

我使用了两种方法：

·方法一：

<img src="/接口路径" />

此方法可行，图片能显示出来！！

·方法二：

<img id="image"/>
<script>

$.ajax({ 
 type : "XXX",
 url : "/接口路径",
 data : { 
     //一些数据
 },
 success : function(result) {
     //将接口结果（文件流）赋值到img标签的src上
     document.getElementById('image').src=result.data;
 } 
});

</script>

此方法不可行，图片显示不出来！！

请问，方法二的图片为什么无法显示？感觉有时候方法二很有必要，比如有时候需要在请求接口时传入一些header信息。

【注】图片的文件流信息为下图所示：

Answer 1

三种方法

1. 直接把src写成接口地址
2. 使用ajax请求数据，返回来之后使用Blob包装，然后把src写成blob地址
3. 后端把图片base64编码输出为文本形式，ajax请求回来这个文本，src写成data:image/jpeg;base64,后端base64数据

Answer 2

如果result.data是图片二进制数据，应该将图片二进制数据base64编码，前面加图片类型，参考：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABd4AAAEjCAMAAAAbleO0AAAABGdBTUEAAL…………" />

Answer 3

document.getElementById('image').src='/接口路径';

如果接口是直接返回二进制的，只能这样设置
或者编码成base64

$.ajax({
    url:'',
    dataType:'text',
    success:function(string){
        document.getElementById('image').src='data:image/png;base64,'+window.btoa(string);
    }
})

=====
试了下，btoa只支持普通编码的字符串，所以这个方法要换个思路，如果获取的string没问题，那就是想办法转换成blob暂时没测试成功。所以还是在服务端编码base64输出过来，比较稳妥。 不过base64数据量比普通的二进制会大好多。

Answer 4

Storage::get()我记得这个好像是读取内容，返回的貌似不是二进制数据。
你可以用Storage::readStream(path)这个试试，返回的是resource类型

刚刚查了一下$.ajax资料，貌似是这玩意并不支持数据流，只支持json,text,xml等格式 。。。。。。

Answer 5

都说错了。。你返回的确实是二进制数据。而不是 base64 你这种 ajax 请求的文件流，需要用到前端的 blob 对象来接收处理。然后转成你需要的格式（如base64）

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它，比如用在img.src上。

具体参考：Blob 对象