Angular 7 中的 OpenSeadragon

Question

我正在尝试获取在 Angular 中运行的 OpenSeadragon v2.4 的基本示例。7. 我已正确导入 npm 模块并且它在某种程度上可以正常工作。

我正在看这个简单的例子here。这是我的代码：

var duomo = {
  Image: {
    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
    Url:  "//openseadragon.github.io/example-images/duomo/duomo_files/",
    Format: "jpg",
    Overlap: "2",
    TileSize: "256",
    Size: {
      Width: "13920",
      Height: "10200"
    }
  }
};
  var viewer = OpenSeadragon({
    element: this.viewer.nativeElement,
    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
    showNavigator:true,
    tileSources: duomo
  });

当我运行它时，正在创建 canvas 元素，但图像似乎没有加载到我的组件中。

当我查看 WebKit 下的“网络”选项卡时，它找到了第一个文件： http://openseadragon.github.io/example-images/highsmith/highsmith_files/1/0_0.jpg，似乎是空的。该页面是空白的。

如果我为 tileSources 设置了一个无法访问的值，则找不到图像但缩放控件会呈现。

以上代码是从我的本地计算机引用示例 url 的正确方法吗？为什么只有第一个 image/tile 呈现？它在寻找其他东西吗？

Answer 1

我发现了我自己的问题。我没有为正在使用的 html 元素添加宽度和高度。这是我忘记的：

<div id="seadragon-viewer" style="width:800px; height:600px;" #viewer></div>

Angular 7 中的 OpenSeadragon

OpenSeadragon in Angular 7

openseadragon