Это очень странное поведение, и я не знаю, что с этим делать, я создаю веб-сайт для обрезки изображений, используя Vue. js и Cropper Js, на главной странице пользователи выбирают изображение они хотят обрезать и нажать «Продолжить», на следующей странице показан компонент с именем ImageCropper.vue
, холст и все отображается успешно, но он крошечный, но, скажем, я редактирую html, даже если я добавляю только пустую строку , изображение возвращается к нужному размеру (у меня нет предопределенного размера для него, поэтому оно просто занимает 100% ширины контейнера, а высота, как я полагаю, устанавливается автоматически).
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>
Перед редактированием шаблона:
После редактирования (просто добавлена пустая строка):
Я пытался оформить его с помощью css, но ни один из них, похоже, не повлиял на него, возможно, что-то не так с тем, как я использую vue? Это Vue с Vuetify, если это имеет значение.