Angular 7中的OpenSeadragon

Question

我正在尝试获取一个在Angular 7中工作的npm v2.4的基本示例。我已经正确地导入了OpenSeadragon模块，并且它在某种程度上是有效的。

我正在看这个简单的示例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下的Network选项卡时，它找到了第一个文件：http://openseadragon.github.io/example-images/highsmith/highsmith_files/1/0_0.jpg，它看起来是空的。页面是空白的。

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

上面的代码是从我的本地机器引用示例url的正确方式吗？为什么只渲染第一个图像/平铺？它是在寻找其他东西吗？

Answer 1

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

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