ios img标签中的src无法识别 blob:http:xxxxxx 路径格式

ios img标签中的src无法识别 blob:http://xxxxxx 路径格式

场景复现

由于后端没有将文件资源暴露出来，只提供了没有域名的路径，此时需要用后端提供的下载接口，对文件资源进行下载，返回数据为流（接口需要加：responseType: ‘arraybuffer’, 这个属性），又因为下载接口返回的是流数据，那么前端需要做展示，处理如下：

将返回的文件流转换为blob文件地址

之所以转换为blob文件路径，是因为资源文件里面可能包含多种文件格式png, jpg, pdf等 格式，这样生成的路径可以被安卓系统img标签的src识别，但无法被ios系统识别

// type 有多种取值
const blob = new Blob([res], {type: 'application/pdf'})
const url = window.URL.createObjectURL(blob)

产生的问题：blob:http://xxxxxx路径在ios中无法被 src进行访问

解决方案如下：

将图片流数据转换为base64，完美解决安卓和ios，img标签展示图片流的兼容性问题，代码如下：

 const getBase64Str = (buffArr) => {
    const src =
      'data:image/png;base64,' + btoa(
        new Uint8Array(buffArr).reduce(
          (data, byte) => data + String.fromCharCode(byte), '')
      );
    return src
  }

两年的菜鸟前端码农，如有讲解错误，还请大佬们指正，谢谢