How to display an image from mysql using Express - mysql

Question

I have a sql table 'animals' where there are blobs images. I found out how to upload images but not how to display them.
I would like to display the image which is called 'Dog' in my table.
Here is my code, where I print the result of my blob img.
let sql = 'SELECT * FROM animals WHERE file_name=\'Dog\''
connection.query(sql, (err,result) => {
console.log(result[0].img)
})
Here is the result of my code:
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff db 00 84 00 09 06 07 13 12 12 15 13 13 13 16 16 15 15 18 18 17 16 18 15 17 15 17 17 16 ... >
Is there is any way to display that picture?
Thank you.

Answer 1

You can use the Fetch API to get the resource on your web page.
You can display the image like this :
fetch('http://localhost:1234/your_api')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
document.querySelector("#databaseimage").src = objectURL;
});
In HTML :
<img id="databaseimage"/>
You can read more about Fetch API here :
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch