এসএপ বি 1, আইটেমিমেজ থেকে আনীত চিত্রটি কীভাবে প্রদর্শিত করবেন?

Question

আমি এসএপি বি 1 পরিষেবা স্তর থেকে একটি চিত্র আনছি। পোস্টম্যানে, আমি এটিকে এটি হিসাবে দেখতে সক্ষম হচ্ছি image/pngতবে এটি প্রদর্শনের ক্ষেত্রে একটি সমস্যা রয়েছে।

এটি দেখানোর সঠিক উপায় কী <img />?

require(fetchedImage) - কাজ করে না

---

আমি চিত্রটি আনতে এবং এটি ক্লায়েন্টের কাছে দেওয়ার জন্য একটি ক্লাউড ফাংশন তৈরি করেছি, তবে কীভাবে এটি করবেন তা সম্পর্কে আমি নিশ্চিত নই।

একটি দুর্দান্ত অদ্ভুত জিনিস এই জাতীয় কিছু

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

কীভাবে এটি পাস করবেন তা জানেন না res.send(IMAGE IN PNG)যাতে আমি ক্লায়েন্ট-সাইডে একটি চিত্র পেতে পারি।

চেক ইন base64রূপান্তর কিন্তু আমি কিভাবে তাদের ব্যবহার নিশ্চিত নই।

---

হালনাগাদ

পোস্টম্যানের অনুরোধ: (এটি ভাল কাজ করছে)

জিইটি: https://su05.consensusintl.net/b1s/v1/ আইটেম আইমেজ ('পরীক্ষা') / $ মান

শিরোলেখ : sessionId: করলে আমায় জিজ্ঞাসা আপনি চেষ্টা

কিছু কারণে আমরা সরাসরি ফ্রন্ট-এন্ডে চিত্রটি আনতে পারি না এবং মিডলওয়্যার তৈরি করা দরকার যাতে আমরা এটি ব্যবহার করে চলেছি 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' ] },

কনফিগ:

{ url:

ডেটা:

'পিএনজি পান \ r \ n \ n u001a \ n \ n u0000 \ u0000 \ u0000 \ rIHDR \ u0000 \ u0000 \ u0000 \ u0000 \ u0000 \ u0000 \ b হল \ u0002 \ u0000 \ u0000 \ u0000 \ u0006 \ u001fS \ u0000 \ u0000 \ u0000 \ u0019tEXtSoftware \ u0000 অ্যাডব চিত্র

এটি আরও দীর্ঘতর এবং আরও ৮০-১০০ লাইনের জন্য রয়েছে

আপনি যদি পরীক্ষা করতে চান তবে নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

পিয়ন:

পোস্ট: https://us-central1-rapid-replacement.cloudfunifications.net/getImageFromItems

দেহ: product "productId": "পরীক্ষা"}

বৈধ প্রোডাক্ট আইডিগুলি হ'ল: 1. "আরআর 1000102" 2. "পরীক্ষা" 3. "" আরআর 1000101 "

Comments

আপনি কী ব্যাকএন্ডে সামগ্রী প্রকার সেট করেছেনres.set({'Content-Type': 'image/png'});

— সি। গোশেভ

হ্যাঁ আমি চেষ্টা করেছিলাম পাশাপাশি এটি একটি ভাঙা চিত্র দেয়।

— ধাওয়াল জর্দোশ

তুমি কি তাদের কোথাও বাঁচাও?

— সি। গোচেভ

না, আমি নই, এটি ছাড়া কী করার কোনও উপায় আছে?

— ধাওয়াল জর্দোশ

আপনি সরাসরি const request = require('request')এবং রুটে এটির প্রক্সি তৈরি করতে পারেনrequest.get(url).pipe(res);

— সি। গোশেভ

Answer 1

আপনি যদি চিত্রগুলি গতিশীলভাবে ব্যবহার করতে চান, আপনাকে উপাদানটি মাউন্ট করার সাথে সাথে ছবিগুলি আনতে হবে এবং তারপরে এটি sertোকাতে হবে। আনীত চিত্রটি তখন উপাদানটির অবস্থায় সংরক্ষণ করা উচিত এবং সেখান থেকে img ট্যাগের src অ্যাটারবট-এ অন্তর্ভুক্ত করা উচিত। ধরে নিলাম আপনি ইতিমধ্যে ছবিটি আনতে পারবেন, নীচের কোডটি কাজ করা উচিত।

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

আমি সরাসরি কম্পোনেন্টডিডমাউন্টে আনতে পারব না, যেহেতু আমাকে সার্ভার-সাইডে একটি কাস্টম ফাংশন করতে হবে এবং তার জন্য, আমি এটি ক্লাউড ফাংশনের মাধ্যমে করছি।

— ধাওয়াল জর্দোশ

এটি আমাকে ক্লায়েন্টের দিকে আনতে দিচ্ছে না, এটি বলছে যে আমি যখন প্রতিক্রিয়া থেকে এটি করি তখন অবৈধ শিরোনামগুলি আনতে / অক্ষতে পাস করা হয়।

— ধাওয়াল জর্দোষ

Answer 2

আমি যে কার্যনির্বাহী সমাধানটি এসেছি তার নিকটতমতম এটি। মূলত আমি যা চেষ্টা করেছি তা হ'ল চিত্রটি আনা এবং তারপরে এটি ক্লায়েন্টের objectURLব্লাবারে পরিণত করা যাতে আপনি এটি এটিকে তৈরি করতে পারেন U 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]"/>