I encountered a peculiar issue while working on a website for image cropping using Vue.js and CropperJs. On the homepage, users can select an image to crop and proceed to the next page where a component named ImageCropper.vue is displayed. Strangely, the canvas appears tiny initially. However, when I made a slight modification to the HTML (such as adding a blank line), the image resized itself correctly.
ImageCropper.vue
<template>
<div class="image-container">
<img ref="image" :src="source">
</div>
</template>
<script>
import Cropper from 'cropperjs'
export default {
name: "ImageCropper",
props: ["source"],
data() {
return {
cropper: null,
imageElement: null
}
},
mounted() {
this.imageElement = this.$refs.image
this.cropper = new Cropper(this.imageElement, {
aspectRatio: 1
})
}
}
</script>
Original template view: https://i.stack.imgur.com/5woRw.png
Modified template view (after adding a blank line): https://i.stack.imgur.com/h6THB.png
I attempted to style it with CSS without success. Perhaps my Vue implementation has an issue? This project uses Vue with Vuetify components.