The first argument is required and must be an <img> or <canvas> element.

[onukselcuk]

I'm getting "The first argument is required and must be an <img> or <canvas> element."

[Agontuk]

Provide a sample how you're using it. You can also check the example project.

[onukselcuk]

I'm using vue typescript in nuxt.js. cropper ref is not recognized. I couldn't find the proper type for it. I'm not sure if it's the only problem. I'm using the same setup in another project and it works fine. But the version is 4.1.0 in that project. I could try downgrading the package but I don't prefer to do it.

    <input
      ref="fileInput"
      accept=".jpg, .jpeg, .png"
      style="display: none"
      type="file"
      @input="onFileSelect"
    />
    <Dialog
      id="upload-profile-photo-dialog"
      :visible.sync="imageCropperPopupActive"
      :style="{ width: '50vw' }"
      :modal="true"
      class="popup-dialog"
    >
      <template #header>
        <div class="header-top-red-line"></div>
        <h2 class="dialog-header">Upload Profile Photo</h2>
      </template>
      <div>
        <div class="w-full h-full">test</div>
        <vue-cropper
          v-show="imageCropperActive"
          ref="cropper"
          :src="selectedFile"
          alt="Source Image"
        ></vue-cropper>
      </div>
    </Dialog>
    ...
    interface $refs {
       cropper: CropperData
       fileInput: HTMLImageElement
	}
    ...
    data(){
      imageCropperPopupActive: false as boolean,
      imageCropperActive: false as boolean,
      selectedFile: '' as string,       
    }
    ...
    methods:{
      onFileSelect(e) {
        const file = e.target.files[0]
        this.mime_type = file.type
        if (typeof FileReader === 'function') {
          this.imageCropperPopupActive = true
          const reader = new FileReader()
          reader.onload = (event) => {
            // @ts-ignore
            this.selectedFile = event.target.result
            this.$refs.cropper.replace(this.selectedFile)
          }
          reader.readAsDataURL(file)
          this.imageCropperActive = true
          e.target.value = ''
        } else {
          alert('Sorry, FileReader API not supported')
        }
      },    
    } 


    

[onukselcuk]

I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.

[CavalcanteLeo]

I'm on version 5, and getting this error

[VladimirMarahovskiy]

необходимо понизить версию плагина

[hassnian]

I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.

this worked for me!!

[Edmilson-C]

I found the problem. I'm using the wrong version. Since nuxt.js is still based on vue2 I should be using 4.2.0 version of this package.

This worked for me. Thanks!