vue显示图片取中间的正方形

在Vue中显示图片并取中间的正方形，可以通过CSS样式来实现。首先，你需要将图片设置为背景图，然后通过设置背景位置和大小来裁剪出中间的正方形部分。

以下是一个简单的示例：

1. 在HTML模板中添加一个div元素，用于显示图片：

<template>
  <div class="image-container"></div>
</template>

2. 在CSS中设置`.image-container`的样式：

<style scoped>
.image-container {
  width: 300px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
  background-image: url('path/to/your/image.jpg'); /* 图片路径 */
  background-position: center; /* 背景图居中 */
  background-size: cover; /* 背景图覆盖整个容器 */
}
</style>

在这个例子中，`.image-container`是一个300x300像素的div元素，它使用`background-image`属性设置了背景图片。`background-position: center;`确保图片在容器中居中显示，而`background-size: cover;`则确保图片覆盖整个容器，同时保持图片的宽高比。

这样设置后，图片会以居中的方式显示，并且只显示图片中间的部分，形成一个正方形的效果。如果需要调整显示的正方形的大小，可以修改`.image-container`的`width`和`height`属性。