需求, 图片二进制 转 图片 直接显示
坑1: 返回blob
我尝试了
1. 返回的二进制用new Blob([blob], {type:'image/jpeg'}), 这个不行
2.在请求头加responseType::'blob'

油猴脚本的GM_xmlhttpRequest, 是直接加上responseType::'blob',即可, 我之前是在加headers:{}里, 不看文档的下场
坑2: 不能用函数返回(也可能是我姿势有问题)
就是这个搞了我最久
为了简洁美观, 我是先搞一个函数发请求获取数据, 获取后, 再createObjectURL, 要么undefined, 要么其他.我尝试了各种组合
(先return数据再createObjectURL,或者先createObjectURL在return url,都不行), 最后把函数去掉, 直接写请求请求完createObjectURL, 再直接img.src = link,最后成功了


因为我看到大佬们各种方法都离不开createObjectURL, 所以我感觉是我这里错了,感谢大佬

--------分割线-----------------------------------------

在写油猴脚本:
我从链接直接获取图片源数据, 然后我该怎么把这个图片显示出来啊.
首先排除直接.src=这个图片链接, 因为refer限制403.

我想错了
原来js搞不了referer

咱只是8月份刚接触前端，不过，关于前端显示图片流的问题，你可以试试图片转base64，然后解码。 反正我是这么做的。

静态的资源，或者晚上的连接，可以直接使用src引用好像。不过我当时是要前后端通信，后端传图片给前端，所以需要把后端传过来的图片流按照base64解码。

我七月份开始学的，学的aspnet和jjquery，怎么完全看不懂楼上在说啥，忽然觉得自己瞎学了俩月   

浏览器的图片？控制台看流怎么加载就行

用 Header Editor 试试
https://he.firefoxcn.net/

咱大致参照的应该是这个。有兴趣可以试试。
https://www.cnblogs.com/m1754171640/p/14187567.html

我也看到blobl, 我是用油猴脚本,
我试了油猴的GM_xmlhttpRequest, 附加请求头也附加了blob , 最后提示createObjectURL错误.
然后也试了XMLHttpRequest, 好像发不出请求    , 现在很纠结

不行, 第二步, 我加了responseType:"arraybuffer", 返回值还是不变, 应该是服务器没做对应的返回方法.

配合这个可以, 但让我感觉像开了修改器一样, 心理很不爽   
关键是我还是不懂该怎么直接解析并显示出来, 心理很难受

前端我不太熟，但是这个方法应该是对的，后端不用做其他处理了
你和别人的对比看看是不是漏了什么？
https://www.cnblogs.com/m1754171640/p/14187567.html

复制代码 // 图片接口 export const getPicList = (params) => {     return request({         url: Vue.prototype.BASE_URL + '/examiner/showpic',         method: 'get',         params: { ...params },         responseType: 'arraybuffer'     }) }//img标签   <img class="imgWH" :src="fileField" alt />        //请求图片接口并且对文件流进行处理  let picParam = {         filename: decodeURIComponent(row.bioinformaticsFilePath),       };       getPicList(picParam).then((res) => {         var data = res.data;         this.fileField =           "data:image/png;base64," +           btoa(             new Uint8Array(data).reduce(               (data, byte) => data + String.fromCharCode(byte),               ""             )           );       });

问题是在第二步, 他是加了这个请求头后, 返回ArrayBuffer数据, 我加了这个请求头后, 还是返回图1 的数据

仅提供一个思路，图片文件头是JFIF 之前的是什么我就不知道了 你可以试试删除前面的

不知道你想要什么效果
服务器能直接返回图片的话
要是想从链接得到图片的话

复制代码 async function blobToDataUrl(blob) {   return new Promise(resolve => {     const reader = new FileReader();     reader.onload = e => resolve(e.target.result);     reader.readAsDataURL(blob);   }); } const url = 'https://south-plus.org/p_w_picpath/colorImagination/logo-s-summer2.png' const response = await fetch(url); const blob = await response.blob(); const dataurl = await blobToDataUrl(blob); const w = window.open(); w.document.body.innerHTML = `<img src="${dataurl}" />`;

然后就可以在新窗口中看到图片了

SyntaxError: await is only valid in async functions and the top level bodies of modules
JS弱鸡表示不知道怎么改

基本全copy

不是，你看看content-type是不是搞错了

用async function包一下

复制代码 async function blobToDataUrl(blob) {   return new Promise(resolve => {     const reader = new FileReader();     reader.onload = e => resolve(e.target.result);     reader.readAsDataURL(blob);   }); } async function main() {   const url = 'https://south-plus.org/p_w_picpath/colorImagination/logo-s-summer2.png'   const response = await fetch(url);   const blob = await response.blob();   const dataurl = await blobToDataUrl(blob);   const w = window.open();   w.document.body.innerHTML = `<img src="${dataurl}" />`; } main();

感谢大佬, 我知道问题在哪了   

这TM还是GHS的论坛吗