javascript - SAP B1, How to display fetched Image from ItemImage? - Stack Overflow

admin管理员组

文章数量:1399796

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.

---

Update

Postman Request: (This is working fine)

GET : ('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:.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:

body: {"productId":"test"}

Valid productId are: 1. "RR000102" 2. "test" 3. "RR000101"

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.

---

Update

Postman Request: (This is working fine)

GET : https://su05.consensusintl/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:.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/getImageFromItems

body: {"productId":"test"}

Valid productId are: 1. "RR000102" 2. "test" 3. "RR000101"

• javascript
• node.js
• sapb1

Share Improve this question Follow edited Sep 8, 2020 at 15:16 Boghyon Hoffmann 18.1k1414 gold badges9393 silver badges205205 bronze badges asked Jan 17, 2020 at 21:14 Dhaval JardoshDhaval Jardosh 7,30955 gold badges3434 silver badges7474 bronze badges 11

• 1 Have you set the content type in the backend res.set({'Content-Type': 'image/png'}); – C.Gochev Commented Jan 21, 2020 at 20:30
• 1 Yes I tried that as well, it gives a broken image. – Dhaval Jardosh Commented Jan 21, 2020 at 20:31
• 1 do you save them somewhere? – C.Gochev Commented Jan 21, 2020 at 20:34
• 1 No, I'm not, is there a way to get it done without that? – Dhaval Jardosh Commented Jan 21, 2020 at 20:40
• 1 You can proxy it directly const request = require('request') and in the route request.get(url).pipe(res); – C.Gochev Commented Jan 21, 2020 at 20:50

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 4

If you want to use images dynamically, you have to fetch the images as soon as the ponent is mounted and insert it afterwards. The fetched picture should then be saved in the state of the ponent and included from there in the src attrbut of the img tag. Assuming you can already fetch the picture, the code below should work.

import React, { Component } from "react";

export default class ComponentWithFetchedImage extends Component {
  constructor() {
    super();
    this.state = { image: undefined };   
  }

  ponentDidMount() {
    let fetch_url = "https://picsum.photos/200";   // Insert your fetch url here
    fetch(fetch_url)
      .then(res => res.blob())
      .then(blob => URL.createObjectURL(blob))
      .then(url => this.setState({ image: url }))
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="ponent">
        <img src={this.state.image} alt="" />
      </div>
    );   
  }
}

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/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>

This issue has been resolved.

const getImage = async (sessionId, ItemCode) => {
  console.log("fetching image");
  let result = {};

  result = await axios.get(
    `${settings.url}${endpoints.ItemImages}('${ItemCode}')/$value`,
    { 
      headers: {Cookie: `B1SESSION=${sessionId}`},
      responseType: "arraybuffer" } 
    ).then(response => Buffer.from(response.data, 'binary').toString('base64'));

  //Here we're returning base64 value of Image
  return result;
};

So we're able to see the image on the client-side using

<img src="data:image/png;base64,[BASE64-VALUE-HERE]"/>

本文标签： javascriptSAP B1How to display fetched Image from ItemImageStack Overflow