Successfully Saving base64 Image to Azure Blob storage but blob image always broken/small white box

Question

I have a image converted to base64 I am trying to upload to my azure blob storage using createBlockBlobFromText.

self.blobServer.createBlockBlobFromText(containerName, fileName, baseStrChars, { contentSettings: { contentType: 'image/jpeg' } }, function(error, result, response) {
     if (error) {
         console.log(error);
     }
     console.log("result", result);
     console.log("response", response);
});

My new jpeg image appears in blob storage container but when I go to the blob image URL I always get this.

My container's access policy is set to container and I pasted my base64 string to a base64 to image converter and the correct image appears. The problem seems to be the way I create the blob and not the base64 string.

I am puzzled as to why the whole flow seems to be working, but still the image is broken when I go to the URL. Any ideas ?

Have you look at what's stored inside the blob? curl -s http://blob.url/image.jpg, is it JFIF or jibberish? Here's what i mean: i.imgur.com/lkAtjkS.png — evilSnobu
One more thing here, browsers loooove caching Azure blobs to death! Make sure you're testing in a fresh Incognito session. — evilSnobu
This will not work. Browsers display images when the files are saved in binary format. In order to display base64 images, you would need to use CSS (Data-Uri). Please try by saving image as binary file instead of converting the contents into bas64 string. HTH. — Gaurav Mantri

Gary Liu Gary Liu · Accepted Answer · 2016-09-20T09:43:05

To visit the images directly via Urls in browser requires binary content. You can convert the base64 encoded string to binary buffer in your node.js backend, and upload the buffer string to Azure Storage.

Please try the following code snippet:

var rawdata = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
var type = matches[1];
var buffer = new Buffer(matches[2], 'base64');

blobsrv.createBlockBlobFromText('mycontainer','profile-pic-123.jpg', buffer, {contentType:type}, function(error, result, response) {
        if (error) {
            console.log(error);
        }else{
         console.log(result)
        }
    });

Successfully Saving base64 Image to Azure Blob storage but blob image always broken/small white box

1 Answers