el-image的大图预览被限制在了当前页面

如果您想让 el-image 的大图预览在新页面中打开，可以通过设置 `preview-src-list` 属性来实现。具体做法是，在 `el-image` 标签中添加 `preview-src-list` 属性，并将其赋值为一个数组，数组中的每个元素表示大图的 URL。例如：

<el-image
  src="小图的URL"
  preview-src-list="['大图的URL1', '大图的URL2', ...]"
></el-image>

这样，当用户点击图片时，会在新页面中打开大图。另外，如果您使用的是 element-ui 版本较低的组件库，可能需要将 `preview-src-list` 改为 `:preview-src-list`。

相关问题

el-image 大图预览

el-image是一个基于Element UI的图片组件，可以用于显示图片并支持大图预览。要实现el-image的大图预览功能，可以按照以下步骤进行操作：

1.在页面中引入Element UI组件库和相关样式文件。

2.在el-image标签中设置属性v-preview-src-list，将其绑定到一个方法上，该方法返回一个包含所有图片地址的数组。

3.在该方法中，将当前点击的图片地址放在数组的最前面，以便在预览时首先显示该图片。

4.在el-image标签中设置属性v-preview-src-index，将其绑定到一个变量上，该变量表示当前点击的图片在数组中的下标。

5.点击图片时，会自动触发大图预览功能，预览时会显示所有图片，并以当前点击的图片为起点进行预览。

以下是一个el-image大图预览的示例代码：

<template>
  <div>
    <el-image
      v-for="(item, index) in imgList"
      :key="index"
      :src="item"
      style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
      :preview-src-list="getPreviewList(item, index)"
      :preview-src-index="previewIndex"
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        'https://picsum.photos/200/300?random=1',
        'https://picsum.photos/200/300?random=2',
        'https://picsum.photos/200/300?random=3',
        'https://picsum.photos/200/300?random=4',
        'https://picsum.photos/200/300?random=5'
      ],
      previewIndex: 0
    }
  },
  methods: {
    getPreviewList(item, index) {
      let arr = [...this.imgList]
      arr.splice(index, 1)
      arr.unshift(item)
      return arr
    }
  }
}
</script>

el-image大图预览设置预览初始比例大小

您可以使用 `viewer-init-scale` 属性来设置el-image大图预览的初始比例大小。该属性可以设置为一个数字类型的值，表示初始的缩放比例。例如，将 `viewer-init-scale` 设置为 `0.5` 表示初始缩放比例为50%。如果没有设置该属性，则默认为自适应大小。以下是一个示例代码：

<el-image src="/path/to/image.jpg" viewer viewer-init-scale="0.5"></el-image>