OpenSeadragon无法从后端API加载图片瓦片问题求助

问题概述 #

尝试用OpenSeadragon展示从.NET Core后端API获取的高分辨率图片瓦片，后端提供DZI XML文件和物理存储的图片瓦片，但瓦片加载时持续返回404错误。

环境配置 #

• 后端：C# .NET Core API服务器
• DZI文件：通过API接口以XML响应形式提供
• 图片瓦片：存储在服务器文件系统的物理目录中

已执行的排查操作 #

• 启用API服务器CORS策略，允许跨域请求
• 配置服务器将图片瓦片作为静态文件对外提供
• 验证DZI XML文件的图片URL及属性配置正确
• 按照OpenSeadragon的预期结构，将瓦片存放在与cropped_img.dzi同级的cropped_img_files目录中

错误表现 #

加载DZI XML文件后，OpenSeadragon请求图片瓦片时返回404状态码，错误提示显示“Tile 4/0_0 failed to load”，对应请求的瓦片URL格式为https://localhost:7257/api/images/cropped_img_files/4/0_0.jpg。

相关代码 #

客户端代码 #

<!DOCTYPE html>
<html>
<head>
  <title>OpenSeadragon Fetch Example</title>
  <script type="text/javascript" src="/openseadragon-bin-4.0.0/openseadragon.min.js"></script>
</head>
<body>
  <div id="openseadragon-viewer"></div>

  <script>
    fetch('https://localhost:7257/api/images/cropped_img/dzixml')
      .then(response => response.text())
      .then(xmlData => {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlData, 'application/xml');
        const imageNode = xmlDoc.getElementsByTagName('Image')[0];
        const sizeNode = xmlDoc.getElementsByTagName('Size')[0];

        const dzi = {
          Image: {
            xmlns: imageNode.getAttribute('xmlns'),
            Url: 'https://localhost:7257/api/images/cropped_img_files/',
            Format: imageNode.getAttribute('Format'),
            Overlap: imageNode.getAttribute('Overlap'),
            TileSize: imageNode.getAttribute('TileSize'),
            Size: {
              Height: sizeNode.getAttribute('Height'),
              Width: sizeNode.getAttribute('Width')
            }
          }
        };

        // Create an OpenSeadragon viewer and load the tileSources
        const viewer = OpenSeadragon({
          id: 'openseadragon-viewer',
          prefixUrl: '/openseadragon-bin-4.0.0/images/',
          tileSources: dzi
        });
      })
      .catch(error => {
        console.error('Error loading DZI XML data:', error);
      });
  </script>
</body>
</html>

服务器端代码（DZI接口） #

[EnableCors(policyName: nameof(MyCorsPolicy))]
[HttpGet]
[Route("{id}/dzixml")]
[Produces("application/xml")]
public IActionResult GetDziImageXML(string id)
{
    try
    {
        // Retrieve the DZI image based on the provided ID
        string filePath = GetDziFilePath(id);

        if (filePath != null && System.IO.File.Exists(filePath))
        {
            // Set the appropriate response headers
            Response.Headers.Add("Content-Type", "application/xml");
            Response.Headers.Add("Access-Control-Allow-Origin", "*");
            Response.Headers.Add("Access-Control-Allow-Methods", "GET");
            Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");

            // Return the DZI file content as the response
            return PhysicalFile(filePath, "application/xml");
        }
        else
        {
            // DZI file not found, return appropriate error response
            return NotFound();
        }
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"An error occurred: {ex.Message}");
    }
}

已调整的配置 #

按建议给OpenSeadragon容器添加宽高样式（补充了原代码缺失的单位）：

<div id="openseadragon-viewer" style="width: 1000px; height: 800px;"></div>

请求协助 #

怀疑问题出在图片瓦片的URL构造或服务器静态文件配置上，请求指导如何通过后端API服务器正确提供DZI XML和图片瓦片以适配OpenSeadragon。

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