【Vue】（解决）el-image 图片引入根路径@无效

<!-- src/components/ImageCropper.vue --> <template> <div> <el-upload action="#" accept="image/*" :show-file-list="false" :auto-upload="false" :on-change="handleUpload" > <el-button type="primary">选择图片</el-button> </el-upload> <div v-if="imageSrc" class="mt-4"> <vue-cropper ref="cropperRef" :src="imageSrc" :aspect-ratio="aspectRatio" :view-mode="viewMode" :guides="true" ></vue-cropper> <div class="mt-4 flex gap-2"> <el-button @click="rotate(-90)">逆时针旋转</el-button> <el-button @click="rotate(90)">顺时针旋转</el-button> <el-button type="success" @click="cropImage">裁剪图片</el-button> </div> </div> <div v-if="croppedImage" class="mt-4"> <h4>裁剪结果：</h4> <img :src="croppedImage" class="result-image" /> <el-button type="primary" @click="downloadImage" class="mt-2">下载图片</el-button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { VueCropper } from 'vue-cropper'; import 'vue-cropper/dist/index.css'; import { ElMessage } from 'element-plus'; const cropperRef = ref(null); const imageSrc = ref(''); const croppedImage = ref(''); const aspectRatio = ref(16 / 9); // 默认宽高比 const viewMode = ref(1); // 0-无限制, 1-限制裁剪框不超过图片 // 处理图片上传 const handleUpload = (file) => { if (!file.raw.type.match('image.*')) { ElMessage.error('请选择图片文件'); return; } const reader = new FileReader(); reader.onload = (e) => { imageSrc.value = e.target.result; croppedImage.value = ''; // 清除之前的裁剪结果 }; reader.readAsDataURL(file.raw); }; // 旋转图片 const rotate = (deg) => { cropperRef.value.rotate(deg); }; // 执行裁剪 const cropImage = () => { cropperRef.value.getCroppedCanvas().toBlob((blob) => { const reader = new FileReader(); reader.onload = () => { croppedImage.value = reader.result; }; reader.readAsDataURL(blob); }); }; // 下载图片 const downloadImage = () => { const link = document.createElement('a'); link.href = croppedImage.value; link.download = 'cropped-image.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; </script> <style scoped> .result-image { max-width: 100%; border: 1px solid #eee; margin-top: 10px; } </style> 执行选择图片都没有图片显示的，点击裁剪会报chunk-LKTAM6RV.js?v=5230a3fd:1733 Uncaught TypeError: cropperRef.value.getCroppedCanvas is not a function