Ionic Vue Camera

I cannot get anything to happen after opening the photo gallery. The gallery opens (finally), but I cannot trigger anything afterwards – cannot make a feedback message appear or show the image. Here’s my code:

Installation (pretty sure I have extra files in here and that ionic-native isn’t doing anything)

    npm install ionic
    npm install @vue/cli -g
    npm install vue-router -g
    npm install @ionic/vue -g
    npm install @ionic/core -g
    npm install cordova-cli -g
    npm install ionic-webpack -g
    npm install ionic-native -g
    npm install @ionic-native/core -g
    npm install ionicons@4.5.9-1 -g
    vue create yourProjectName
    cd yourProjectName
    npm install ionic cordova
    npm run build 

    ionic cordova platform add ios
    ionic cordova platform add android
    npm install @ionic-native/core
    npm install @ionic/pwa-elements
    ionic integrations enable cordova
    ionic cordova plugin add cordova-plugin-file
    npm install @ionic-native/file
    npm install @ionic-native/camera
    ionic cordova plugin add cordova-plugin-camera
    vue add cordova
    ionic serve --devapp


	import Vue from 'vue';
	import Axios from 'axios';
	import App from './App.vue';
	import router from './router';
	import IonicVue from '@ionic/vue';


	Vue.config.productionTip = false;

	new Vue({
	  el: '#app',
	  template: '<App/>',
	  components: { App },
	  render : (h) => h(App)



          <p>feedback: {{feedback}}</p>
          <!-- <img :src="imagepath ? imagepath : null" /> -->
          <ion-button @click="getPicture()">get Picture Now</ion-button>



    export default {
      name: "camera",
      data() {
        return {
          imagepath: null,
          feedback: 'nothing',

      //do I need this?
      mounted() {
        document.addEventListener("deviceready", () => {
 = "device is ready";

      methods: {

        //open photo gallery
        getPicture() {

  , onFail,{ quality: 50,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            }).then((imageData) => {
     = "success";
              //this.currentImage = 'data:image/jpeg;base64,' + imageData;
            }, (err) => {
     = "fudge: " + err;
            function onSuccess(imageData) {
     = "success";
              //this.imagepath = imageData.dataUrl;
            function onFail(message) {
     = "fudge";





take a look here

Hi Aaron Saunders,

I actually already spent about 4 days on your example before trying the Cordova (instead of Capacitor) method. While imitating your files, I got barcode scanner to open, but was entirely unable to open the image gallery. Are VeeValidate and/or Firebase required for your code to work?


what error are you getting? I recently downloaded the project and retested it and it works fine.

No error at all. Just nothing happened.

Are there npm installation instructions for your project? Perhaps I could download all of it and figure out where I went wrong.

Or maybe it was an issue with devApp, although devApp does give you warnings for files of unsupported plugins.