SAP B1，如何显示从ItemImage提取的图像? [英] SAP B1, How to display fetched Image from ItemImage?

问题描述

我正在从SAP B1服务层获取图像. 在邮递员中，我可以将其查看为image/png，但是显示它时出现了问题.

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.

在<img />中显示它的正确方法是什么?

What's the correct way to show it in <img />?

require(fetchedImage)-不起作用

我创建了一个Cloud Function来获取图像并将其传递给客户端，但是我不确定该怎么做.

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

不知道如何通过res.send(IMAGE IN PNG)传递它，所以我可以看到在客户端获取图像.

Don't know how to pass it via res.send(IMAGE IN PNG) so I can see get an image on the client-side.

检查了base64转换，但是我不确定如何使用它们.

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

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

标题:会话ID:尝试时问我

由于某些原因，我们无法直接在前端获取图像，而需要创建一个中间件，因此我们在Firebase Cloud Function

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.

这是Firebase Cloud Function中的函数:

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:

{状态:200，

{ status: 200,

statusText:确定"，

statusText: 'OK',

标题:

{ 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 \ u0000 \ u0006 \ u001fS \ u0000 \ u0000 \ u0000 \ u0019tEXtSoftware \ u0000AdobeImageReadyq e< \ u0000 \ u0000 \ u0003hiTXtXML:com.adobe.xmp \ u0000 \ u0000 \ u0000 \ u0000 \ u0000 \ u0000

'�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

这条线超长，可以再增加80-100条线

THIS IS SUPER LONG AND GOES FOR 80-100 more lines

如果要测试，可以使用以下内容:

If you want to test you can use the following:

邮递员:

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

body:{"productId":"test"}

body: {"productId":"test"}

有效的productId为:1."RR000102" 2.测试" 3."RR000101"

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

推荐答案

如果要动态使用图像，则必须在安装组件后立即获取图像，然后将其插入.然后，应将获取的图片保存在组件的状态中，并从那里包含在img标签的src属性中.假设您已经可以获取图片，则下面的代码应该可以使用.

If you want to use images dynamically, you have to fetch the images as soon as the component is mounted and insert it afterwards. The fetched picture should then be saved in the state of the component 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 };   
  }

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

这篇关于SAP B1，如何显示从ItemImage提取的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！