Javascript Img src=”等；水滴：http://localhost... 不'；t工作-不使用createObjectURL或readAsDataURL | Firebase | Vue.js

我想我现在已经尝试了一切，阅读了关于这件事的每一个问题，但我还是没能成功

Cart.vue

<template>
<div>
<h1>CART</h1>
  <img :src="imgSrc" style="width:600px; height: 600px">
</div>
</template>

Firebase功能

exports.sendPaymentRequest = functions.https.onCall((data, context) => {
const qr = async () => {
       try {
        const json = {
            token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",
            size: "300",
            format: "jpg",
            border: "0"
        }
        const response = await axios.post('https://mpc.getswish.net/qrg-swish/api/v1/commerce', json)
       console.log('status', response.status)
       if(response.status !== 200){throw new Error ('Error requesting QR code')}
        return response.data
    } catch (e){
        console.log('error', e)
        return e
    }
    }
    return qr();
})

const json = {
        token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",
        size: "300",
        format: "png",
        border: "0"
    }
var requestSettings = {
    url: 'https://mpc.getswish.net/qrg-swish/api/v1/commerce',
    method: 'POST',
    encoding: null,
    json: true,
    'content-type': 'application/json',
    body: json,
};

request(requestSettings, (error, response, body) => {
    res.set('Content-Type', 'image/png');
    res.header({"Access-Control-Allow-Origin": "*"});
    res.send(body);
});

在我的2个控制台中，在mounted（）钩子中记录了Blob和URL，我得到：

看起来不错吧？好像有一个斑点？还有网址

然而：

。。。所以我尝试将挂载的（）更改为

const qr = firebase.functions().httpsCallable('sendPaymentRequest')
qr()
.then(res => {
  const self = this;
  const blob = new Blob([res.data], {type: 'image/jpg'})
  const reader = new FileReader();
  reader.onloadend = function() {
    self.imgSrc = reader.result
  };
  reader.readAsDataURL(blob);
})
.catch(e => console.log(e))

这似乎也起作用，但。。嗯，不是。。现在，我的图像中有一个漂亮的小base64编码字符串，而不是URL：

但是仍然没有图像

所以我尝试了一些我在网上阅读时发现的其他东西。。从可调用函数移动到onRequest函数等。。当我和邮递员做完全相同的请求时，我在回复中得到了一个很好的二维码

如果我在firebase函数中记录response.headers，我会看到

“内容类型”：“图像/jpeg”， “内容长度”：“31476”

所以在服务器上我得到了一个图像。。我正在发送它，返回响应。数据

响应。数据为：

����JFIF��C

---

$。“，#（7），01444'9=82您收到一个utf8编码的文本，二进制响应中的一些字节已损坏

执行请求时，添加一个额外的

  ...
  responseType: "blob"
}

选项，这将确保二进制数据不会作为文本读取，而是正确保存。

---

另外，现在您不需要自己构建Blob，它已经是

响应中的一个Blob。数据

您正在接收一个utf8编码的文本，二进制响应中的一些字节已经损坏

执行请求时，添加一个额外的

  ...
  responseType: "blob"
}

选项，这将确保二进制数据不会作为文本读取，而是正确保存。

---

另外，现在您不需要自己构建Blob，它已经是

响应中的一个。data

谢谢！我离此更近了一步，但还没有实现。通过这样做，我现在在我的“data”中收到一个Blob，但是Blob的内容类型是“text/html”，尽管我是从服务器直接发送API调用响应的，这是一个图像/jpeg“。我已从HttpScalable移动到“常规”“https函数，我从客户端使用axios请求它。Bc CORS我无法直接从客户端调用第三方API，但基本上服务器只是在进行调用，返回响应，但在传输时会转换为text/html。。快关门！！非常感谢@如果您执行了

console.log（等待blobtext（））

操作，您仍然可以得到正确的

����JFIF��C

内容？如果是这样，您应该修复服务器端以发送正确的heder，但是您可以通过执行

newblob（[Blob]，{type:“image/jpeg”}）来强制mime类型正确，blob.text（）获取该内容。。我刚刚想在服务器上我应该做
res.header（{“访问控制允许源代码”：“*”}）.writeHead（200，{'Content-Type'：'image/jpeg'}）.end（response.data）
而不是
res.status（200）.send（response.data）
-这在客户端上给我一个Blob作为image/jpeg。。但它仍然无法呈现。。我是否需要使用fs或其他方式将服务器上的response.data作为文件读取？或者写一篇文章。。非常感谢你的帮助，我是这方面的初学者，意义重大！好吧我让它工作了<代码>响应类型：必须在客户端上设置“blob”

。。但第二部分不起作用的是在我的服务器上，似乎我在axios上做了一些错误的事情，因为我让它处理请求。。为什么到目前为止我还不确定，正在仔细阅读。。在服务器上使用axios时注意到客户端中的blob大小为96292，而在请求时为53453。。我的axios呼叫/响应一定有问题..编辑了我的原始问题以包含代码示例。。将此问题标记为已回答，因为axios/请求问题似乎是一个单独的问题！非常感谢！非常感谢。我正在更近一步，但还没有到那里。。通过这样做，我现在在我的“数据”中收到一个Blob，但是Blob的内容类型是“text/html”，尽管我是从我的服务器直接发送API调用的响应，这是一个“image/jpeg”。。我已经从HttpScalable迁移到了“常规”https函数，我从客户端使用axios请求它。Bc CORS我无法直接从客户端调用第三方API，但基本上服务器只是在进行调用，返回响应，但在传输时会转换为text/html。。快关门！！非常感谢@如果您执行了

console.log（等待blobtext（））

操作，您仍然可以得到正确的

����JFIF��C

内容？如果是这样，您应该修复服务器端以发送正确的heder，但是您可以通过执行

newblob（[Blob]，{type:“image/jpeg”}）来强制mime类型正确，blob.text（）获取该内容。。我刚刚想在服务器上我应该做
res.header（{“访问控制允许源代码”：“*”}）.writeHead（200，{'Content-Type'：'image/jpeg'}）.end（response.data）
而不是
res.status（200）.send（response.data）
-这在客户端上给我一个Blob作为image/jpeg。。但它仍然无法呈现。。我是否需要使用fs或其他方式将服务器上的response.data作为文件读取？或者写一篇文章。。非常感谢你的帮助，我是这方面的初学者，意义重大！好吧我让它工作了<代码>响应类型：必须在客户端上设置“blob”

。。但第二部分不起作用的是在我的服务器上，似乎我在axios上做了一些错误的事情，因为我让它处理请求。。为什么到目前为止我还不确定，正在仔细阅读。。在服务器上使用axios时注意到客户端中的blob大小为96292，而在请求时为53453。。我的axios呼叫/响应一定有问题..编辑了我的原始问题以包含代码示例。。我会像你回答的那样记下这个答案吗

functions.https.onRequest(async (req, res) => {

axios({
        method: 'get',
        url: 'http://localhost:5001/swook-4f328/us-central1/retrieveQr',
        responseType: 'blob',
       })
        .then(async res => {
          const url = (window.URL || window.webkitURL).createObjectURL(res.data)
          this.imgSrc = url;
          
        })
        .catch(e => e)

const json = {
        token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",
        size: "300",
        format: "png",
        border: "0"
    }
var requestSettings = {
    url: 'https://mpc.getswish.net/qrg-swish/api/v1/commerce',
    method: 'POST',
    encoding: null,
    json: true,
    'content-type': 'application/json',
    body: json,
};

request(requestSettings, (error, response, body) => {
    res.set('Content-Type', 'image/png');
    res.header({"Access-Control-Allow-Origin": "*"});
    res.send(body);
});

const json = {
    token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",
    size: "300",
    format: "png",
    border: "0"
}
const response =  await axios.post('https://mpc.getswish.net/qrg-swish/api/v1/commerce', json)
if(response.status !== 200){throw new Error ('Error requesting QR code')}
res.header({"Access-Control-Allow-Origin": "*"}).writeHead(200, {'Content-Type': 'image/png'}).end(response.data)
// neither this works:
// res.header({"Access-Control-Allow-Origin": "*"}).status(200).send(response.data)

  ...
  responseType: "blob"
}