score:2
you could either encode the image data to base64 format and return it, which can then be used to display the image in html as shown here (e.g., <img src="data:image/png;base64, ...
), or send the raw bytes, as you already do, and convert them into base64 format (using btoa()
, string.fromcharcode()
and uint8array
) or blob
object (and then call url.createobjecturl() to convert the blob into a url.) on client side. the below examples show how to achieve the last two methods, using axios
library, which you seem to be using in your project, as well as fetch api
.
using axios
option 1 - convert raw image bytes into blob
axios({
method: 'post',
url: '/upload',
data: formdata,
headers: {
'content-type': 'multipart/form-data'
},
responsetype: "blob"
})
.then(response => {
var bloburl = url.createobjecturl(response.data);
var image = document.getelementbyid("myimage");
image.onload = function(){
url.revokeobjecturl(this.src); // release the blob url once the image is loaded
}
image.src = bloburl;
})
.catch(error => {
console.error(error);
});
option 2 - convert raw image bytes into base64 encoded string
axios({
method: 'post',
url: '/predict',
data: formdata,
headers: {
'content-type': 'multipart/form-data'
},
responsetype: "arraybuffer"
})
.then(response => {
base64string = btoa(string.fromcharcode(...new uint8array(response.data)))
contenttype = response.headers['content-type']
return base64string;
})
.then(base64string => {
var image = document.getelementbyid("myimage");
image.src = "data:" + contenttype + ";base64," + base64string;
})
.catch(error => {
console.error(error);
});
using fetch api
option 1 - convert raw image bytes into blob
fetch('/predict', {
method: 'post',
body: formdata,
})
.then(response => response.blob())
.then(blob => {
var bloburl = url.createobjecturl(blob);
var image = document.getelementbyid("myimage");
image.onload = function(){
url.revokeobjecturl(this.src); // release the blob url once the image is loaded
}
image.src = bloburl;
})
.catch(error => {
console.error(error);
});
option 2 - convert raw image bytes into base64 encoded string
fetch('/predict', {
method: 'post',
body: formdata,
})
.then(response => {
contenttype = response.headers.get('content-type')
return response.arraybuffer();
})
.then(arraybuffer => {
base64string = btoa(string.fromcharcode(...new uint8array(arraybuffer)))
var image = document.getelementbyid("myimage");
image.src = "data:" + contenttype + ";base64," + base64string;
})
.catch(error => {
console.error(error);
});
remember to define an <img>
tag in your html file, where you wish to display the image:
<img id="myimage" src="">
Source: stackoverflow.com
Related Query
- How to render Streamable image on React coming from the FastAPI
- How to render an Image in react which is coming from Nodejs backend as res.json()?
- How to get the data from React Context Consumer outside the render
- How to pass the match when using render in Route component from react router (v4)
- How to Read image data from API and render in React Component
- Django Rest Framework and React Front End: How to prevent unauthorized users from viewing private images if they get a hold of the image URL?
- Previously I rendered the image from google drive now I need to render it from local path. How can I render images in const variable in Reactjs?
- How to set a general onchange for the dynamic form fields coming from api in react js.?
- How to render default image before rendering the actual image in react js?
- How to get an image link from a JSON to render in a react app
- How to render streamable image response in react as a image?
- How to set a background image from the public folder in React (Create React App)
- How to use template string to create link from props and render image in React component
- How to render image from JSON string into my react application?
- So how can I sum all the values in all objects in an array which is coming from react redux?
- I have a data coming from the api how do I display it in tree form in react
- how to fetch image from the API using react js
- How to load an image onto the page with react from dynamic data?
- How to reference a React Component class from outside the render function?
- React, Node, Mongodb : My image file is not being served from backend and trying to render it on the React side throws 404 not found
- How can I turn the data that is a image came from API to url to use in img tag in react Js
- How to add image from local folder in the state of my react component?
- How can I get the 1st image from each album with an even ID in React using Fetch?
- How to fetch image dynamically from database in React to show in the UI?
- When we render react Components from an iterable using Array.prototype.map() how is the index generated, and how does react uses it?
- How to display the image and background image from the array in react
- How to take items from an array that is in a React component's props and render to the page?
- how to render the correct date from table in mysql in react js
- React Server Side Rendering - how to render from the server with :productId params passed in?
- How to render the React component with dynamic data realtime from socket.io high efficiency
More Query from same tag
- Error trying to display image from external API (Unexpected token � in JSON)
- Inline SVG background image does not work in React.js
- How make React admin's <SimpleFormIterator> behave as a stack on item addition (add item on top)?
- Default selection and reroute on changing selection for <select> in React-Redux
- Disable button onClick in React but only to one element in Index
- How to install plugin-export-default-from to Babel in react project
- How to dynamically pass the different time on setInterval() method in react js
- Unable to render content from api call in componentDidMount()
- How to fetch initial value using useState() before the component is mounted
- Where is AsyncStorage Data Physically Located on Android Devices?
- Compiled with warnings. React
- ReactJS - setState() is not updating
- react three fiber lock object position in canvas
- JSON Formating on web pages
- Rendering React/Redux app multiple times on a single page?
- Reactjs: Unknown why function re-run second time
- ReactCSSTransitionGroup is not applying classes
- What is the best way to handle state/props if i want to fetch and display a separate component when a specific link is clicked?
- this.setState not re-rendering view ReactJS and Ruby on Rails
- Reactjs material-ui TextField change color label and underline activity field input
- How to require / import chartist-plugin-tooltip in react app
- bundle.js too big in webpack project
- unable to click on button with Formik form
- Load website in mobile app using web view
- How to get current position(X Y) of div that i am dragging around in react?
- React Fetch with State Value
- The tag <ReactComponent> is unrecognized in this browser
- Why can't i set my constructor inside a function?
- How can I export a string from an array in props instead of one value at a time?
- React - What does the callback in forceUpdate do?