This should be simple enough, but after wrestling with it for hours, I still can't get it to work. So far, all my attempts have resulted in the image becoming 'corrupted or truncated', according to firefox.

Retrieve the image from the server with a jquery-ajax call:

 $.ajax({

                async: false,

                url: db[key][DocumentLink],

                success: function (result2) {

Base64 encode the image, and store it in localStore:

In this example I'm using the jquery base64-encoding plugin, but I've tried several.

                        var dbKey = Doc  + db[key][ID] +   + db[key][Title];

                        console.log(storing:  + db[key][DocumentLink] +  in  + dbKey + n);

                        localStorage.removeItem(dbKey);

                        var base64Image = $.base64Encode(result2);

                        console.log(base64Image.length);

                        localStorage.setItem(dbKey, base64Image);

                       console.log(is stored:  + db[key][DocumentLink] +  in  + dbKey + n);

                }

})

Display the image with a data url:

function openImageFromDB(dbKey) {

    console.log(Trying to display image with key  + dbKey);

    var base64Img = localStorage.getItem(dbKey);

    document.getElementById(documentHolder).src='data:image/jpeg;base64,' + base64Img;

}

The corresponding img:

 <img id=documentHolder alt=Image view placeholder src= />

However, on every try, firefox displays:

Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string>

The Url: points to a valid jpeg image, and the base64Image.length and the error message show that the var / localStorage actually contain what seems to be base64 encoded data.

Any ideas?