Menu
I'm fetching an image from SAP B1 Service Layer.
In postman, I'm able to view it as image/png, but there is an issue displaying it.
What's the correct way to show it in <img />?
require(fetchedImage) - doesn't work
I have created a Cloud Function to fetch the image and pass it on to the client, but I am not sure how to do it.
Having a super weird object something like this
data:
> '�PNGörönöu001aönöu0000öu0000öu0000örIHDRöu0000öu.........
Don't know how to pass it via res.send(IMAGE IN PNG) so I can see get an image on the client-side.
Checked base64 conversion but I'm not sure how to use them.
Postman Request: (This is working fine)
GET : https://su05.consensusintl.net/b1s/v1/ItemImages('test')/$value
Headers: SessionId: ASK ME WHEN YOU TRY
For some reason, we can't fetch the Image directly in Front-End and need to create a middleware so we're doing it in Firebase Cloud Function
So here is the function which fetches the image and doesn't know how to pass it.
Here is the function in Firebase Cloud Function:
if (!req.body.productId) {
res.status(400).send({ error: "productId is required" });
return;
}
console.log("Starting the process");
const productId = req.body.productId;
const login = await Auth.login();
const fetchedImg = await ItemMaster.getImage(login["SessionId"], productId);
//Here in the fetchedImg, we're getting some data like
res
.status(200)
.set("Content-Type", "image/png")
.send(fetchedImg);
And we're getting a response like this:
{ status: 200,
statusText: 'OK',
headers:
{ server: 'nginx', date: 'Wed, 22 Jan 2020 03:52:22 GMT', 'content-type': 'image/png', 'transfer-encoding': 'chunked', connection: 'close', dataserviceversion: '3.0', 'content-disposition': 'inline; filename="rr-96600.png"', vary: 'Accept-Encoding', 'set-cookie': [ 'ROUTEID=.node2; path=/b1s' ] },config:
{ url:data:
'�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000�\u0000\u0000\u0000�\b\u0002\u0000\u0000\u0000\u0006\u001fS�\u0000\u0000\u0000\u0019tEXtSoftware\u0000Adobe ImageReadyq�e<\u0000\u0000\u0003hiTXtXML:com.adobe.xmp\u0000\u0000\u0000\u0000\u0000
THIS IS SUPER LONG AND GOES FOR 80-100 more lines
If you want to test you can use the following:
Postman:
POST: https://us-central1-rapid-replacement.cloudfunctions.net/getImageFromItems
body: {"productId":"test"}
Valid productId are: 1. "RR000102" 2. "test" 3. "RR000101"
941
Here is the closest to a working solution I came. Basically what I tried is to fetch the image and then turn it into a blob on the client so you can make it into a objectURL.Updated code streams the image as a buffer and consumes it on the client then turns it into objectURL and assigns to image src
Server code:
const http = require('http')
const axios = require('axios')
const fs = require('fs')
const stream = require('stream')
const server = http.createServer(function(req, res) {
if (req.url === '/') {
res.setHeader("Access-Control-Allow-Origin", "*");
axios.post(
"https://su05.consensusintl.net/b1s/v1/ItemImages('test')/$value", {
responseType: "blob"
}).then(function(resp) {
console.log(resp.data)
const buf_stream = new stream.PassThrough()
buf_stream.end(Buffer.from(resp.data))
buf_stream.pipe(res.end())
}).catch(err => console.log(err))
}
})
server.listen(3500)
Client code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img style="width:200px; height:200px" />
<script>
const img = document.getElementsByTagName("IMG")
fetch('http://localhost:3500').then(function(response) {
console.log(response)
return response.body
}).then(function(data) {
console.log(data)
const reader = data.getReader()
return new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
// When no more data needs to be consumed, close the stream
if (done) {
controller.close();
return;
}
// Enqueue the next data chunk into our target stream
controller.enqueue(value);
return pump();
});
}
}
})
})
.then(stream => new Response(stream))
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
.then(url => img[0].src = url)
.catch(err => console.error(err));
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
