How to Show Blob Image in HTML

const imgurl = "https://cdn62.picsart.com/182788826000202.jpg?type=webp&to=crop&r=256"
fetch(imgurl)
  .then(response => response.blob())
  .then(myBlob => {
  var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(myBlob);
   const myImgElem = document.getElementById('my-img');
   myImgElem.src = imageUrl
})

<img id="my-img" />

Using JavaScript to display a Blob

The problem was that I had hexadecimal data that needed to be converted to binary before being base64encoded.

in PHP:

base64_encode(pack("H*", $subvalue))

How I display as image a blob object with JS

You can use URL.createObjectURL to generate a blob URL and set it as the image source.

const blobUrl = URL.createObjectURL(blob) // blob is the Blob object
image.src = blobUrl // image is the image element from the DOM

How to display BLOB image from MySQL through AJAX?

You cannot embed binary data into JSON because it will be damaged. This is why your server should encode the image to Base64 before sending it to the client. As a bad but simple example: if you are using MySQL 5.6+ you can add TO_BASE64(image) AS b64_image to your SELECT statement. But for better performance, encode images to Base64 using PHP, not MySQL.

Also, you need to fix your JavaScript code, by replacing:

"<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";

with:

"<td><img src='data:image/jpeg;base64',"+value['b64_image']+"></td>";

How to display mysql blob image in html using Vuejs?

What you want is a data url. You will need to convert the byte array to base64. There is no way to use the raw bytes. Perhaps do this in a computed property, using one of the byte array to base64 functions.

Markup

<img :src="dataUrl">

Behaviour (untested!)

computed : {
    dataUrl(){
        return 'data:image/jpeg;base64,' + btoa(
            new Uint8Array(this.info.image)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
    }
}

Search your conscience. This is really not a good idea :-) Sending images as a JSON encoded byte array is something I've never seen, and will be about, guessing, 10x larger on the wire than the binary image.
Images in the DB are an antipattern. Images in JSON work, but they should be encoded as base64 strings in the JSON. Even then, they reduce the readability of the JSON, and can bury tools like Postman. Data urls are much slower to load than regular urls. Even with images in the DB, if you control your api, you can gain a lot by making image apis that return just the byte array, with an application/jpeg mime type.

---

Related Topics