Creating base64 img data for DB storage

Ionic Framework Ionic Vue
1
  • If I run this to retrieve an image and encode it for storage in a stand alone function - works perfectly to create data:image/png;base64.
  • Running exactly the same function in ionic vue creates data:text/html;base64, the data for which refers to some type of ionic html doc and not the image.
  • What am I missing here because being new to ionic vue i am not understanding the architecture or something. I’ve read and jsfiddled/ionic served thru everything I can find for 3 days without success. I do not want to use the input=file to get the image, I wish to assign an image.

function retrieveFile() {

file = ‘blank.person.png’;

var xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.responseType = 'blob'; 
xhr.onload = function() {
                          if (this.status == 200) {
                                                    var reader = new FileReader(); 
                                                    reader.readAsDataURL(this.response); 
                                                    reader.onload = function () { 
                                                            var base64String = reader.result; 
                                                       }
                                                   }
                      };           

     xhr.send();

}

2

I would not store the image in DB.
Look for some services where you can save and retrieve the files.
quite easy to use.
I don’t have expreience in Vue but I guess it almost same as in Angular.

you should save then the url of th file.

3

That’s what I thought too except I just though it quicker/easier to store it in the same firestore document as raw image (all small).

if you capture the image on a device with the capacitor plugin that is one URL. If the user tries to access that document from the web it will not find the document and vice-versa. It seems like storing the images to another repository might be the only choice. It was also interesting that it worked out the box for a non ionic/vue piece of code but returned something entirely different otherwise. I still don’t understand why. I’m sure someone out there with a good understanding of the vue/ionic architecture has a simple answer but thanks for the constructive suggestion.

4

I resolved this and encoded it.

The problem was understanding the relative path for the file i was trying to encode. What was being returned was the raw HTML error page because the relative path was incorrect. I decided to just use the public/assets for reading the images and then encoded them from there.