时间戳

首页 > 解决方案 > Angular 7 中的 OpenSeadragon

openseadragon - Angular 7 中的 OpenSeadragon

问题描述

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

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

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
  });

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

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

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

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

标签： openseadragon

解决方案

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

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

推荐阅读