vue-cropper显示网络图片

要在vue-cropper中显示网络图片，你可以按照以下步骤操作：

1. 首先，将网络图片的URL传递给vue-cropper组件的"img"属性。你可以在引用中的"imageToBase64"方法中将网络图片的URL赋值给vue-cropper的"img"属性。代码示例如下：

   imageToBase64(file) {
     // 将网络图片的URL赋值给vue-cropper的img属性
     this.option.img = file.url; // 假设file为网络图片对象，url为图片的URL
     this.dialogVisible = true;
   }

2. 然后，确保vue-cropper组件正确地渲染网络图片。你可以使用element-ui的`<el-dialog>`组件包裹vue-cropper组件，以便弹出对话框显示图片。代码示例如下：

   <template>
     <el-dialog v-model="dialogVisible" title="Cropper">
       <vue-cropper ref="cropper" :img="option.img"></vue-cropper>
       <div slot="footer">
         <el-button @click="cancel">Cancel</el-button>
         <el-button type="primary" @click="confirm">Confirm</el-button>
       </div>
     </el-dialog>
   </template>

在这个示例中，通过使用`v-model="dialogVisible"`来控制对话框的显示和隐藏。vue-cropper的"img"属性被绑定到"option.img"，以确保vue-cropper能够正确地显示网络图片。

3. 最后，你需要在点击"Confirm"按钮时获取裁剪后的图片数据。你可以使用vue-cropper提供的`getCropData`方法来获取裁剪后的图片数据，并根据你的需求进行处理。在你的示例中，你可以在"finish"方法中调用`getCropData`方法，获取裁剪后的图片数据并上传到服务器。代码示例如下：

   finish() {
     this.$refs.cropper.getCropData(data => {
       // 获取裁剪后的图片数据
       let files = this.dataURLtoFile(data, Date.parse(new Date()), 'my.jpeg');
       this.file = files;

       // 执行上传操作或其他处理
       // ...
     });
     this.dialogVisible = false;
   }

通过以上步骤，你可以在vue-cropper中显示网络图片，并进行裁剪和处理相关操作。请根据你的实际需求进行相应的修改和补充。