vue2.js项目中使用瓦片服务器存储图片，实现超大图片展示能写个demo吗

当我们需要展示非常大的图片时，使用瓦片服务器是一种非常好的选择。下面是一个使用瓦片服务器展示超大图片的 Vue.js demo：

1. 首先，我们需要安装 `iview` 和 `vue-tile` 两个依赖：

npm install iview vue-tile --save

2. 在 `main.js` 中引入 `iview` 和 `vue-tile`：

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import VueTile from 'vue-tile'

Vue.use(iView)
Vue.use(VueTile)

3. 在组件中使用 `vue-tile` 展示图片：

<template>
  <div>
    <tile :src="imageSrc" :preview="previewSrc"></tile>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageSrc: 'http://your-tile-server-url/{z}/{x}/{y}.jpg',
      previewSrc: 'http://your-tile-server-url/preview.jpg'
    }
  }
}
</script>

其中，`imageSrc` 是瓦片图片的地址，`previewSrc` 是预览图片的地址。在实际使用中，需要将 `{z}`、`{x}`、`{y}` 等参数替换为实际的值。

4. 在 `App.vue` 中引入组件并传入图片地址：

<template>
  <div id="app">
    <image-viewer :src-list="[imageSrc]" :preview-src-list="[previewSrc]"></image-viewer>
  </div>
</template>

<script>
import ImageViewer from 'iview/src/components/image-viewer'

import LargeImageViewer from './components/LargeImageViewer'

export default {
  name: 'App',
  components: {
    ImageViewer,
    LargeImageViewer
  },
  data () {
    return {
      imageSrc: 'http://your-tile-server-url/{z}/{x}/{y}.jpg',
      previewSrc: 'http://your-tile-server-url/preview.jpg'
    }
  }
}
</script>

在 `data` 中定义了 `imageSrc` 和 `previewSrc`，并将它们传入 `image-viewer` 组件中。

5. 最后，在 `components/LargeImageViewer.vue` 中定义 `tile` 组件：

<template>
  <div>
    <tile :src="src" :preview="preview"></tile>
  </div>
</template>

<script>
import { Tile } from 'vue-tile'

export default {
  name: 'LargeImageViewer',
  props: {
    src: {
      type: String,
      required: true
    },
    preview: {
      type: String,
      required: true
    }
  },
  components: {
    Tile
  }
}
</script>

这样，我们就可以在 Vue.js 项目中使用瓦片服务器展示超大图片了。