VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

1.官方网站：OpenSeadragon

2.使用npm下载插件：npm install openseadragon

3.在 index.html文件引入资源

  <link rel="stylesheet" href="node_modules/openseadragon/build/openseadragon/openseadragon.css" /><script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>

4.组件使用（一张图片显示效果）

1.引入OpenSeadragon 
import OpenSeadragon from "openseadragon"2.存放图片的标签<div id="openseadragon1" class="w-full h-full"></div>3.初始化实例
const viewer= OpenSeadragon({id: "openseadragon1",//标签idshowNavigator: true, // 是否显示导航缩略图prefixUrl: "/public/openseadragon/images/", //插件小图标tileSource = {type: "image",//图片的类型url: '',//图片的url}})

5.显示多图片切换

1.引入OpenSeadragon 
import OpenSeadragon from "openseadragon"2.存放图片的标签<div id="openseadragon1" class="w-full h-full"></div>3.初始化实例
const viewer: any = ref("")
const initOpenSeadragon = () => {viewer.value = OpenSeadragon({id: "openseadragon1",showNavigator: true, // 是否显示导航缩略图prefixUrl: "/public/openseadragon/images/", //插件小图标})
}4.定义函数：加载不同图片
const loadImage = (imageUrl: any) => {viewer.value.close() // 清除之前加载的图像if (imageUrl) { //判断传进来的url是否有值const tileSource = {type: "image",url: imageUrl,}viewer.value.open(tileSource) // 设置新的tileSources并加载新图像} else {message.warning("未上传图片")}
}
5.在页面加载之后onMounted里获取请求，获取到相关数据后调用初始化方法initOpenSeadragon let listUrl: any = ref({})onMounted(() => {const { code, data } = await API.getGrowthImageInfo()//发起请求if (code === 200) {const list = JSON.parse(data.successfulImageUrl)......//处理数据等相关的initOpenSeadragon()//调用初始化方法initOpenSeadragon }})6.在点击切换按钮时调用loadImage方法loadImage(url)//url是指传图片url

注意 prefixUrl: "/public/openseadragon/images/", 插件小图标来自于官网下载包里面的images文件夹下，可自行放在vue项目的静态资源文件夹里