React中使用OpenSeaDragon加载IIIF图片的URL格式配置问题

核心问题 #

你当前的配置错误地将IIIF Presentation Manifest的@id当作了IIIF Image Service的ID来使用。OpenSeaDragon需要的是图片资源对应的Image Service基础URL，而非Manifest的URL，因此才会在Manifest地址后错误拼接参数。

调整方案 #

方法1：从Presentation Manifest中提取正确的Image Service信息 #

如果API返回的Presentation Manifest中包含图片对应的Image Service链接（通常位于sequences[0].canvases[0].images[0].resource.service路径下），直接提取该Service的完整信息填入tileSources：

// 从返回的manifest中提取Image Service配置
const imageService = manifest.sequences[0].canvases[0].images[0].resource.service;

OpenSeaDragon({
     id: "openSeaDragon",
     preserveViewport: true,
     visibilityRatio: 1,
     defaultZoomLevel: 0,
     sequenceMode: true,
     // 使用提取到的Image Service作为tile源
     tileSources: imageService,
     showFullPageControl: false,
     showHomeControl: false,
     prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/images/"
})

方法2：手动构造Image Service配置 #

如果Manifest中未直接提供Image Service信息，需手动构造符合要求的配置，将@id替换为正确的图片基础URL：

OpenSeaDragon({
     id: "openSeaDragon",
     preserveViewport: true,
     visibilityRatio: 1,
     defaultZoomLevel: 0,
     sequenceMode: true,
     tileSources: {
          "@context": "http://iiif.io/api/image/2/context.json",
          // 替换为正确的图片基础URL（即正确URL中去掉参数的部分）
          "@id": "https://iiif-image.oxalis.br.fgov.be/V/BR0/000/025/668/070/BR0000025668070V.jpg",
          "height": 7200,
          "width": 5233,
          "profile": ["http://iiif.io/api/image/2/level2.json"],
          "protocol": "http://iiif.io/api/image",
          "tiles": [{
               "scaleFactors": [1, 2, 4, 8, 16, 32],
               "width": 1024
          }]
     },
     showFullPageControl: false,
     showHomeControl: false,
     prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/images/"
})

关键说明 #

• IIIF分为两个独立的API：Presentation API（用于描述资源结构的Manifest）和Image API（用于提供图片缩放服务），两者URL结构完全不同。
• OpenSeaDragon的tileSources需要的是Image API对应的服务配置，而非Presentation Manifest的地址。

内容的提问来源于stack exchange，提问作者Tom Dijkema