I have a database, where one of the tables has a blob field and I want to display it as an image. I can't really find any solution for this - any working npm package or a sample of code would be useful. I'm using reactjs and nodejs.
2 Answers
What you want to do is create an URL that you can pass to the img src of the HTML img
JS
var url = window.URL || window.webkitURL;
var imageSrc = url.createObjectURL('your blob');
document.querySelector("#myimage").src = imageSrc;
HTML
<img id="myimage"/>
Comments
Method 1 create readable stream and pipe to response
var stream = require('stream');
var bufferStream = new stream.PassThrough();
bufferStream.end(new Buffer( blob, 'binary' ));
res.writeHead(200, {
'Content-Type' : 'image/jpg'
});
// res is standered express res object
bufferStream.pipe(res)
Method 2 pass blob to base64
var bufferBase64 = new Buffer( blob, 'binary' ).toString('base64');
show image
class Example extends React.Component{
render() {
return <img src={"data:image/jpeg;" + bufferBase64} />
}
}
reference https://stackoverflow.com/.../how-to-create-a-readstream-with-a-buffer-using-nodejs
2 Comments
Mary
I'm fighting with it for a while now (method 2), but the conversion itself is not working - I even console logged bufferBase64 and pasted it as a string into the image's src and it won't return a working image. Do you maybe know the reason why?
Mary
The problem was with the blob file, which was in my database. Eventually I used different code, but the one you sent here would probably work as well