Angular 7 中的 OpenSeadragon

Question

我正在尝试获取在 Angular 7 中工作的 OpenSeadragon v2.4 的基本示例。我已经正确导入了 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 的正确方法吗？为什么只渲染第一个图像/图 block ？它在寻找其他东西吗？

Answer 1

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

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