SAP B1, Làm cách nào để hiển thị hình ảnh được tải từ ItemImage?

Tôi đang tìm nạp hình ảnh từ Lớp dịch vụ SAP B1. Trong postman, tôi có thể xem nó như image/png, nhưng có một vấn đề hiển thị nó.

Cách chính xác để hiển thị nó là <img />gì?

require(fetchedImage) - không hoạt động

Tôi đã tạo một Chức năng đám mây để tìm nạp hình ảnh và chuyển nó cho khách hàng, nhưng tôi không chắc làm thế nào để làm điều đó.

Có một vật thể siêu kỳ lạ như thế này

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

Không biết làm thế nào để vượt qua nó res.send(IMAGE IN PNG)để tôi có thể thấy hình ảnh ở phía máy khách.

Đã kiểm tra base64chuyển đổi nhưng tôi không chắc chắn cách sử dụng chúng.

Cập nhật

Yêu cầu của người đưa thư: (Điều này đang hoạt động tốt)

NHẬN: https://su05.consallelintl.net/b1s/v1/ItemImages ('test') / $ value

Tiêu đề : PhiênId: HỎI TÔI KHI BẠN THỬ

Vì một số lý do, chúng tôi không thể tìm nạp Hình ảnh trực tiếp trong Front-End và cần tạo một phần mềm trung gian để chúng tôi thực hiện nó trong Firebase Cloud Function

Vì vậy, đây là chức năng tìm nạp hình ảnh và không biết làm thế nào để vượt qua nó.

Đây là chức năng trong 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);

Và chúng tôi đang nhận được phản hồi như thế này:

{trạng thái: 200,

trạng thái: 'OK',

tiêu đề:

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

cấu hình:

{ url:

dữ liệu:

'PNP \ \ u0000 \ u0000 \ u0019tEXtSoftware \ u0000Adobe ImageReadyq e <\ u0000 \ u0000 \ u0003hiTXtXML: com.adobe.xmp \ u0000 \ u0000 \ u0000 \ u0000 \ u0000

ĐÂY LÀ SIÊU DÀI VÀ DÀNH CHO 80 - 100 dòng nữa

Nếu bạn muốn kiểm tra, bạn có thể sử dụng như sau:

Người phát thơ:

POST: https://us-central1-rapid-replocation.cloudfifts.net/getImageFromItems

cơ thể: {"sản phẩm": "kiểm tra"}

Sản phẩm hợp lệ là: 1. "RR000102" 2. "test" 3. "RR000101"

Nếu bạn muốn sử dụng hình ảnh một cách linh hoạt, bạn phải tìm nạp hình ảnh ngay khi thành phần được gắn kết và chèn nó sau đó. Sau đó, hình ảnh được tìm nạp phải được lưu ở trạng thái của thành phần và được bao gồm từ đó trong phần xác nhận src của thẻ img. Giả sử bạn đã có thể tải hình ảnh, mã bên dưới sẽ hoạt động.

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

Đây là giải pháp làm việc gần nhất mà tôi đã đến. Về cơ bản những gì tôi đã cố gắng là tìm nạp hình ảnh và sau đó biến nó thành một đốm màu trên máy khách để bạn có thể biến nó thành một objectURLmã .Updated truyền hình ảnh dưới dạng bộ đệm và tiêu thụ nó trên máy khách sau đó biến nó thành objectURL và gán cho hình ảnh src

Mã máy chủ:

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ã khách hàng:

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

Vấn đề này đã được giải quyết.

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

Vì vậy, chúng tôi có thể thấy hình ảnh ở phía khách hàng bằng cách sử dụng

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