SAP B1, ItemImage से प्राप्त छवि कैसे प्रदर्शित करें?

Question

मैं SAP B1 सर्विस लेयर से एक इमेज ला रहा हूं। पोस्टमैन में, मैं इसे देखने में सक्षम हूं image/png, लेकिन इसे प्रदर्शित करने वाला एक मुद्दा है।

इसे दिखाने का सही तरीका क्या है <img />?

require(fetchedImage) - काम नहीं करता

---

मैंने चित्र लाने और ग्राहक को इसे देने के लिए एक क्लाउड फंक्शन बनाया है, लेकिन मुझे यकीन नहीं है कि यह कैसे करना है।

सुपर अजीब वस्तु कुछ इस तरह से होना

 data:
>     '�PNGörönöu001aönöu0000öu0000öu0000örIHDRöu0000öu.........

पता नहीं कैसे इसके माध्यम से पारित करने के लिए res.send(IMAGE IN PNG)तो मैं क्लाइंट-साइड पर एक छवि प्राप्त कर सकता हूं।

चेक किया गया base64रूपांतरण लेकिन मुझे यकीन नहीं है कि उनका उपयोग कैसे किया जाए।

---

अपडेट करें

डाकिया अनुरोध: (यह ठीक काम कर रहा है)

GET: https://su05.consanimintl.net/b1s/v1/ItemImages ('परीक्षण') / $ मूल्य

हेडर : सेशनआईड: एएसके मी ने आपको कब देखा

किसी कारण से, हम छवि को सीधे फ़्रंट-एंड में नहीं ला सकते हैं और एक मिडलवेयर बनाने की आवश्यकता है ताकि हम इसे कर रहे हैं 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);

और हमें इस तरह की प्रतिक्रिया मिल रही है:

{स्थिति: 200,

स्टेटस टेक्स्ट: 'ओके',

हेडर:

{ 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:

डेटा:

'पीएनजी \ 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

इस सुपर लंबी और 80-100 अधिक लाइनों के लिए चला जाता है

यदि आप परीक्षण करना चाहते हैं तो आप निम्नलिखित का उपयोग कर सकते हैं:

डाकिया:

पोस्ट: https://us-central1-rapid-replacement.cloudfunctions.net/getImageFromitit

शरीर: {"productId": "परीक्षण"}

मान्य उत्पाद हैं: 1. "RR000102" 2. "परीक्षण" 3. "RR000101"

Comments

क्या आपने बैकेंड में सामग्री प्रकार निर्धारित किया हैres.set({'Content-Type': 'image/png'});

— C.Ghehev

हां मैंने कोशिश की है कि साथ ही, यह एक टूटी हुई छवि देता है।

— धवल जर्दोष

क्या आप उन्हें कहीं बचाते हैं?

— C.Ghehev

नहीं, मैं नहीं हूं, क्या इसके बिना इसे पूरा करने का कोई तरीका है?

— धवल जर्दोष

आप इसे सीधे const request = require('request')और मार्ग में request.get(url).pipe(res);

— लिख सकते हैं

Answer 1

यदि आप छवियों को गतिशील रूप से उपयोग करना चाहते हैं, तो आपको घटक के माउंट होते ही छवियों को लाना होगा और बाद में सम्मिलित करना होगा। तब भ्रूण की तस्वीर को घटक की स्थिति में बचाया जाना चाहिए और वहाँ से img टैग के src attrbut में शामिल किया जाना चाहिए। मान लें कि आप पहले से ही चित्र ला सकते हैं, नीचे दिए गए कोड को काम करना चाहिए।

import React, { Component } from "react";

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

  componentDidMount() {
    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="component">
        <img src={this.state.image} alt="" />
      </div>
    );   
  }
}

Comments

मैं सीधे ComponentDidMount में नहीं आ सकता, क्योंकि मुझे सर्वर-साइड पर एक कस्टम फ़ंक्शन बनाने की आवश्यकता है और इसके लिए, मैं इसे क्लाउड फ़ंक्शन के माध्यम से कर रहा हूं।

— धवल जर्दोष

यह मुझे क्लाइंट की तरफ लाने की अनुमति नहीं देता है, यह कहता है कि अवैध हेडर भ्रूण / अक्षीय क्षेत्र में पारित हो जाते हैं, जब मैं इसे रिएक्ट से करता हूं।

— धवल जर्दोष

Answer 2

यहां मैं काम कर रहे समाधान के सबसे करीब हूं। मूल रूप से मैंने जो कोशिश की है वह छवि को लाने के लिए है और फिर इसे क्लाइंट पर एक objectURLब्लूब में बदल दें ताकि आप इसे एक में बना सकें। उन्नत कोड छवि को बफर के रूप में स्ट्रीम करता है और क्लाइंट पर खपत करता है और फिर इसे ऑब्जेक्टल में बदल देता है और छवि को असाइन करता है। src

सर्वर कोड:

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)

क्लाइंट कोड:

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

Comments

अरे एक बात मैं आपको बताना भूल गया, कि मुझे यहां एक छवि मिलती है GET : https://su05.consensusintl.net/b1s/v1/ItemImages('test')/$value, लेकिन जब मैं एक ही चीज को पास करता हूं, तो यह काम नहीं करता है। मुझे पता है कि अगर आप एक बेहतर विचार है, माफ करना अगर मैं तुम्हें परेशान कर रहा हूँ।

— धवल जर्दाश

मेरी तरफ से छोटी सी सराहना :)

— धवल जर्दोश

अद्यतन कोड देखें। यह मेरा अंतिम प्रयास था। आशा है कि आप एक समाधान मिल जाएगा।

— सी। गोचव

Answer 3

इस समस्या का समाधान हो गया है।

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;
};

इसलिए हम क्लाइंट-साइड का उपयोग करके छवि को देखने में सक्षम हैं

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