I have PNG image as ReadableStream and I need to display html element img with this ReadableStream as source. Should I convert it to something? Or how can I do it?
Thank you for answer
1
-
you can convert png image to base64 and you can use it in img element and display.Kumar– Kumar2017-09-01 14:18:52 +00:00Commented Sep 1, 2017 at 14:18
Add a comment
|
1 Answer
From Google's docs:
- Get response's
blob - Resolve its
Promise - Create a local source with
URL.createObjectURL - Add it to your document (or update state)
Here's an example
import React, { Component } from 'react'
function validateResponse(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
export default class componentName extends Component {
state = {
src: null
}
componentDidMount() {
fetch(`http://localhost:5000/api/images/home`)
.then(validateResponse)
.then(response => response.blob())
.then(blob => {
this.setState({ src: URL.createObjectURL(blob) })
})
}
render() {
return (
<div>
{ this.state.src && <img alt="home" src={ this.state.src }></img> }
</div>
)
}
}
In my case, data comes from a send_file response from a Flask Python backend
