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的正确方法吗？为什么只渲染第一个图像/拼贴？是否还在寻找其他东西？

Answer 1

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

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

Angular 7中的OpenSeadragon

1 个答案: