SAP B1, ItemImage'dan getirilen Resim nasıl görüntülenir?

SAP B1 Hizmet Katmanı'ndan bir resim alıyorum. Postacıda, olarak görüntüleyebiliyorum image/png, ancak görüntülenen bir sorun var.

Bunu göstermenin doğru yolu nedir <img />?

require(fetchedImage) - çalışmıyor

Görüntüyü almak ve istemciye aktarmak için bir Bulut İşlevi oluşturdum, ancak nasıl yapılacağından emin değilim.

Süper tuhaf bir nesneye sahip olmak böyle bir şey

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

Nasıl geçeceğini bilmiyorum res.send(IMAGE IN PNG)böylece istemci tarafında bir görüntü almak görebilirsiniz.

İşaretli base64dönüşüm ama bunların nasıl kullanılacağı emin değilim.

Güncelleme

Postacı Talebi: (Bu iyi çalışıyor)

GET: https://su05.consensusintl.net/b1s/v1/ItemImages ('test') / $ değeri

Headers : SessionId: DENEYİNİZDE SORUN

Herhangi bir nedenle, Görüntüyü doğrudan Ön Uçta getiremiyoruz ve bir ara katman oluşturmamız gerekiyor, bu yüzden Firebase Cloud Function

İşte görüntüyü getiren ve nasıl geçeceğini bilmeyen fonksiyon.

Firebase Bulut İşlevindeki fonksiyon:

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

Ve şöyle bir yanıt alıyoruz:

{durum: 200,

statusText: 'Tamam',

başlıklar:

{ 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' ] },

yapılandırma:

{ url:

veri:

'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

BU SÜPER UZUN VE 80-100 satır daha gidiyor

Test etmek istiyorsanız aşağıdakileri kullanabilirsiniz:

Postacı:

POST: https://us-central1-rapid-replacement.cloudfunctions.net/getImageFromItems

body: {"productId": "test"}

Geçerli ürün numarası: 1. "RR000102" 2. "test" 3. "RR000101"

Görüntüleri dinamik olarak kullanmak istiyorsanız, bileşen monte edilir edilmez görüntüleri almanız ve daha sonra eklemeniz gerekir. Alınan resim daha sonra bileşenin durumuna kaydedilmeli ve oradan img etiketinin src attrbut'una dahil edilmelidir. Resmi zaten getirebildiğinizi varsayarsak, aşağıdaki kodun çalışması gerekir.

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

İşte geldiğim bir çalışma çözümüne en yakın olanı. Temelde ne denenmiş bir dönüştürebilmek böylece görüntüyü alıp sonra istemci üzerinde bir damla haline getirmek olduğunu objectURListemci ardından resimle objectURL ve devir haline döner bir tampon ve tüketir gibi resim .Updated kodu akışları src

Sunucu kodu:

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)

Müşteri kodu:

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

Bu sorun çözüldü.

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

Böylece, müşteri tarafındaki görüntüyü kullanarak

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